05-计算属性

作者: 乔乔_老师 | 来源:发表于2018-10-21 20:52 被阅读0次

05-计算属性
watch和computed的区别
vue计算属性和侦听器
7 vue 计算属性
属性和方法
Vue复习
swift8——属性
计算属性，以及其和方法、watch侦听器的对比
监听器和计算属性的区别watch,computed
vue 计算属性computed

计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。

所以，对于任何复杂逻辑，你都应当使用计算属性。

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

计算属性练习

<body>
  <div id='itany'>
     <button @click='add'>加货</button>
      <h1>{{total}}</h1>
  </div>
   <script src='js/vue.js'></script> 
   <script>
    
       new Vue({
           el:'#itany',
           data:{
               package1:{price:2,count:3},
               package2:{price:4,count:6}
           },
           computed:{
               total:function(){
                   return this.package1.price*this.package1.count+this.package2.price*this.package2.count
               }
           },
           methods:{
               add:function(){
                   this.package1.count++;
               }
           }
           
       })
    </script>
</body>