vue 计算属性 get 和set

计算属性是什么：vue文档里是这么说的，模板中绑定太多的逻辑会让模板过重且难以维护。换句话说，就是可以自己设置值（b值），这个值和data下定义的值（a值）存在某些关系，b的值是基于a的值，通过某些逻辑产生出来的值，b值可以直接拿到template里去用。当a的值发生变化的时候，b的值会跟着变化。就是计算属性中的默认值get。那set又是什么鬼？b的值是基于a的变化而变化的，那么直接修改b

cofecode

4476人浏览 · 2018-01-25 19:07:04

cofecode · 2018-01-25 19:07:04 发布

计算属性是什么：vue文档里是这么说的，模板中绑定太多的逻辑会让模板过重且难以维护。

换句话说，就是可以自己设置值（b值），这个值和data下定义的值（a值）存在某些关系，b的值是基于a的值，通过某些逻辑产生出来的值，b值可以直接拿到template里去用。当a的值发生变化的时候，b的值会跟着变化。就是计算属性中的默认值get。那set又是什么鬼？

b的值是基于a的变化而变化的，那么直接修改b的值的时候，会怎么样？这里会走进set方法里去。

总之一条：b的值始终是依赖a的值存在和变化的。最后渲染出来的a为100，b为110

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>       
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <p>a的值是：{{a}}</p>
        <p>b的值是：{{b}}</p>
        <button @click="change">按钮</button>
    </div>
    
    <script>        
        new Vue({
            el: '#app',
            data:{
                a:1
            },
            computed: {
              b: {
                // getter
                get: function () {
                  return this.a + 10
                },
                // setter
                set: function (val) {
                    this.a = val
                }
              }
            },
            methods:{
            	change() {
            		this.b = 100
            	}
            }
        })
    </script>
</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^