写了个小demo
<template>
<div class="hello">
<h1 @click="doSomething">{{ msg }}</h1>
<h1 @click="doSomething">{{reversedMessage}}</h1>
<h1>{{site}}</h1>
<ul>
<li v-for="n in 10">
{{n}}
</li>
</ul>
</div>
<!-- <div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>{{details()}}</h1>
</div> -->
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'welcome',
object:{
name: 'Runoob' ,
url: 'Google' ,
slogan: 'Taobao'
}
}
},
methods:{
doSomething: function(){
this.msg = 'welcome BeiJing'
}
},
computed:{
reversedMessage:function(){
return this.msg.split('').reverse().join('');
},
site: {
// getter
get: function () {
return this.name + ' ' + this.url
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
}
}
};
// // 调用 setter， vm.name 和 vm.url 也会被对应更新
// vm.site = '菜鸟教程 https://www.runoob.com';
// document.write('name: ' + vm.name);
// document.write('<br>');
// document.write('url: ' + vm.url);
</script>
