vue的计算属性的使用

vue中通过computed选项定义计算属性计算属性类似于 methods 选项中定义的函数计算属性会进行缓存，只在相关响应式依赖发生改变时它们才会重新求值。函数每次都会执行函数体进行计算。案例实现：输入数学与英语分数，采用 methods 与 computed 分别计算出总得分案例源码：<body><div id="ap...

人比黄花嗖

4975人浏览 · 2020-02-26 21:47:43

人比黄花嗖 · 2020-02-26 21:47:43 发布

vue中通过computed 选项定义计算属性
计算属性类似于 methods 选项中定义的函数
计算属性会进行缓存，只在相关响应式依赖发生改变时它们才会重新求值。
函数每次都会执行函数体进行计算。

案例实现：输入数学与英语分数，采用 methods 与 computed 分别计算出总得分

案例源码：

<body>
  <div id="app">
   数学：<input type="text" v-model="mathScore" >
   英语：<input type="text" v-model="englishScore">
   总分(方法-单向)：<input type="text" v-model="sumScore()">
   总分(计算属性-单向)：<input type="text" v-model="sumScore1">
  </div>
  <script src="./node_modules/vue/dist/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        mathScore: 80,
        englishScore: 90,
     },
      methods: { //不要少了s
        sumScore: function () {
          //在控制台输入 vm.sumScore() 每次都会被调用
          console.info('sumScore被调用')
          // `this` 指向当前 vm 实例，减 0 是为了字符串转为数字运算

return (this.mathScore-0) + (this.englishScore-0)
       }
     },
      computed: { //计算属性
        sumScore1 : function () {
          //在控制台输入vm.sumScore1 不会被重新调用,说明计算属性有缓存
          console.info('sumScore1被调用')
          return (this.mathScore - 0) + (this.englishScore -0)
       }
     }
   })
  </script>

</body>

注意：选项内的计算属性默认是 getter 函数，所以上面只支持单向绑定，当修改数学和英语的数据才会
更新总分，而修改总分不会更新数据和英语

2.对计算属性实现双向绑定

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter

案例源码：

总分(方法-单向)：<input type="text" v-model="sumScore()"><br>
   总分(计算属性-单向)：<input type="text" v-model="sumScore1"><br>
   总分(计算属性-双向)：<input type="text" v-model="sumScore2"><br>
  </div>
  <script src="./node_modules/vue/dist/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        mathScore: 80,
        englishScore: 90,
     },
      methods: { //不要少了s
        sumScore: function () {
          //在控制台输入 vm.sumScore() 每次都会被调用
          console.info('sumScore被调用')
          // `this` 指向当前 vm 实例，减 0 是为了字符串转为数字运算
          return (this.mathScore - 0) + (this.englishScore -0)
       }
     },
      computed: {
        //计算属性默认 getter 只支持单向绑定
        sumScore1 : function () {
          //在控制台输入vm.sumScore1 不会被重新调用,说明计算属性有缓存
          console.info('sumScore1被调用')
          return (this.mathScore - 0) + (this.englishScore -0)
       },
        //指定 getter/setter 双向绑定
        sumScore2 : {
          get: function () {
            console.info('sumScore2被调用')
            return (this.mathScore-0) + (this.englishScore-0)
         },
          set: function (newValue) {//value为更新后的值
            // 被调用则更新了sumScore2，然后将数学和英语更新为平均分
            var avgScore = newValue / 2
            this.mathScore = avgScore
            this.englishScore = avgScore
         }
       }
     }
   })
  </script>

</body>

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}$/, //不连续的两位字母// /^