2018-09-17vue.js计算属性computed

计算属性computed:用于计算复杂逻辑
案例：
js部分：

 <div id="itany">
   <h1>{{msg}}</h1>
   <a href="">{{revMsg}}</a>
 </div>

js部分：

<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#itany",
        data:{
            msg:'hello vue'
        },
        computed:{
            revMsg:function(){
                return this.msg.split(' ').reverse().join('===');
            }
        }
    })
</script>

效果图：

计算属性.png

计算属性练习

body部分：

 <div id="itany">
    <button @click="alt">加货</button>
     <p>总数为：{{add}}</p>  
  </div>

js部分：

<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#itany",
        data:{
            pack:{price:5,count:3},
            pack2:{price:7,count:4}
        },
        methods:{
          alt:function(){
              this.pack.count++;
          }  
        },
        computed:{
            add:function(){
                return this.pack.count*this.pack.price+this.pack2.count*this.pack2.price
            }
        }
    })
</script>

效果图：

计算属性练习2.png