脚本语言 订阅所有【脚本语言】的日志

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

编辑:dnawo 日期:2022-03-21

字体大小: 小 中 大


先看两个例子：

复制内容到剪贴板程序代码 程序代码
<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>


上一篇: Vue入门学习笔记
下一篇: Vue表单双向绑定和取值示例
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
最新日志:
评论: 0 | 引用: 0 | 查看次数: 1510
发表评论
请登录后再发表评论！