欢迎光临

木子屋

标题: Vue框架data和computed两种属性的区别

作者: dnawo

日期: 2022-03-21 10:00 AM

分类: 脚本语言

内容:
先看两个例子：
复制内容到剪贴板 程序代码<div id="example">{{name}}</div>
<script>
var vm = new Vue({
el: '#example',
data: {
name: '张三'
}
})
</script>
复制内容到剪贴板 程序代码<div id="example">{{name}}</div>
<script>
var vm = new Vue({
el: '#example',
computed: {
name: function(){return '张三';}
}
})
</script>
运行结果一样的，粗看没什么区别，我们试着修改下name属性值，会发现computed的修改会出错，这是因为computed里的属性默认只有getter，也就是只读的，不能赋值：
如果要赋值，还需给它要加上setter：
复制内容到剪贴板 程序代码<div id="example">{{name}}</div>
<script>
var vm = new Vue({
el: '#example',
data: {
temp_name: '张三'
},
computed: {
name: {
//getter
get: function(){
return this.temp_name;
},
//setter
set: function(newval){
this.temp_name = newval;
}
}
}
})
</script>
OK，这样就和data一样了，可以看到，computed可以更精细的控制属性读写，但它需要借助一个临时变量(temp_name)才能实现，这样跟C#的字段和属性差不多意思了。当然了，官方称computed为计算属性，computed更大的意义在于计算，再看个例子：
复制内容到剪贴板 程序代码<div id="example">
姓名：{{name}}<br/>
语文：{{chinese}}<br/>
英语：{{english}}<br/>
总分：{{score}}
</div>
<script>
var vm = new Vue({
el: '#example',
data: {
name: '张三',
chinese: 90,
english: 85
},
computed: {
score: function(){
return this.chinese + this.english;
}
}
})
</script>

+ 查看当前日志评论 (0)

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 4.817 ms

返回

标题: Vue框架data和computed两种属性的区别

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 4.817 ms

返回

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 4.938 ms

返回