您的位置：首页 > 产品设计 > UI/UE

vue2.0+基础知识连载（13）--- 计算属性的使用

2018-01-20 19:12 971 查看

<!DOCTYPE html>
<html>

<head>
<title>vue2.0+基础知识连载（13）--- 计算属性的使用</title>
</head>

<body>

<h3>vue2.0+基础知识连载（13）--- 计算属性的使用</h3>

<div id='app'>
<p><span>没用计算属性computed：</span><button @click="updateA">修改a的值</button></p>
<p><span>计算属性computed里没有set方法：</span><button @click="updateB">修改b的值</button></p>
<p><span>计算属性computed里有set方法：</span><button @click="updateC">修改c的值</button></p>
<p>a => {{a}}</p>
<p>b => {{b}}</p>
<p>c => {{c}}</p>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.8/vue.min.js"></script>
<script type="text/javascript">

var vm = new Vue({
data: {
a: 1
},
methods: {
updateA: function() {
console.log('updateA---修改前：---------');
console.log('this.a：', this.a);
console.log('this.b：', this.b);
console.log('this.c：', this.c);
this.a = 12306;
console.log('updateA---修改后：---------');
console.log('this.a：', this.a);
console.log('this.b：', this.b);     //  执行顺序被改变，先执行computed里的b，再执行这个，
console.log('this.c：', this.c);     //  执行顺序被改变，先执行computed里的c，再执行这个，
},
updateB: function() {
console.log('updateB---修改前：---------');
console.log('this.a：', this.a);
console.log('this.b：', this.b);
console.log('this.c：', this.c);
this.b = 157;
console.log('updateB---修改后：---------');
console.log('this.a：', this.a);
console.log('this.b：', this.b);
console.log('this.c：', this.c);
},
updateC: function() {
console.log('查看执行顺序######');
this.c = 10;
console.log('查看执行顺序$$$$$$');
console.log('updateC---this.a：', this.a);
console.log('updateC---this.b：', this.b);
console.log('updateC---this.c：', this.c);
}
},
computed: {
b: function() {
//业务逻辑代码
console.log('computed---bbbbbb');
return this.a + 1;
},
c: {
get: function() {
console.log('computed---cccccc');
return this.a + 2;
},
set: function(val) {
console.log('c-set-val:', val);
console.log('set---修改前：---------');
console.log('set---this.a：', this.a);
console.log('set---this.b：', this.b);
console.log('set---this.c：', this.c);
this.a = val;
console.log('set---修改后：---------');
console.log('set---this.a：', this.a);
console.log('set---this.b：', this.b);
console.log('set---this.c：', this.c);
}
}
}
}).$mount('#app');

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： vue computed 计算属性

相关文章推荐

新的分享

章节导航