美文网首页
计算属性 vue简单求和

计算属性 vue简单求和

作者: 是你的大颖儿 | 来源:发表于2018-09-17 18:00 被阅读0次

例图:


QQ图片20180917175801.png

html 代码:

 <div class="app">
       <button @click="add">加货</button>
       <p>{{tal}}</p>
 </div>

js 代码:

<script src="vue.js"></script>
<script>
    new Vue({
        el:".app",
        data:{
            arr1:{cont:5,pric:3},
            arr2:{cont:8,pric:4},
        },
      
        computed:{
            tal:function(){
            return    this.arr1.cont*this.arr1.pric+this.arr2.cont*this.arr2.pric
            }
        },
        methods:{
            add:function(){
                this.arr1.pric++
            }
        }
    })
</script>

相关文章

网友评论

      本文标题:计算属性 vue简单求和

      本文链接:https://www.haomeiwen.com/subject/ysirnftx.html