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

案例源码:

<body>
  <div id="app">
   数学:<input type="text" v-model="mathScore" ><br>
   英语:<input type="text" v-model="englishScore"><br>

总分(方法-单向):<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>

Logo

前往低代码交流专区

更多推荐