<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<p>初始值：{{name}}</p>
<p>翻转值：{{reverseStr()}}</p>
<p>计算属性翻转值：{{reverse}}</p>
<button @click="setSeverseStr()">点击调用set方法</button>
</div>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
let vm=new Vue({
el:'#app',
data:{
name:'Rose Jack',
firstName:'小',
lastName:'明'
},
methods:{
reverseStr(){
return this.name.split(' ').reverse().join(' ');
},
setSeverseStr(){
this.reverse='xiao ming';
}
},
//计算属性
computed:{
reverse:{
//get方法
get(){
//return this.name.split(' ').reverse().join(' ');
return this.firstName+' '+this.lastName;
},
//set方法
set(str){
let nameArr=str.split(' ');
this.firstName=nameArr[];
this.lastName=nameArr[];
alert(this.firstName);
alert(this.lastName);
}
}
}
})
</script>
</body>
点击之后：
computed vs methods
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。
而使用 methods ，在重新渲染的时候，函数总会重新调用执行。