vue中怎么实现计算属性

vue中怎么实现计算属性，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

什么是计算属性

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

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

这里的表达式包含3个操作，并不是很清晰，所以遇到复杂逻辑时应该使用Vue特带的计算属性computed来进行处理。

计算属性（computed）用于处理复杂逻辑

computed：{ }

computed做为vue的选项是固定的

例子：

<div id="itany">   <p>{{mes}}</p>   <p>{{count}}</p> </div> <script src="../js/vue.js"></script> <script>   new Vue({     el:'#itany',     data:{       mes:'hello vue'     },     computed:{       count:function(){                 //切割    翻转   拼接         return this.mes.split(' ').reverse().join('---')       }     }   }) </script>

输出结果为：

hello vue

vue---hello

练习

要求：点击button按钮使数字以对应的价格改变

Image 2.png

代码如下：

<div id="itany">   <button v-on:click="num">总和</button>   <p>{{arr}}</p> </div> <script src="../js/vue.js"></script> <script>   new Vue({     el:'#itany',     data:{       name:{price:2,count:0},       names:{price:4,count:0},       see:true     },     methods:{       num:function(){         this.name.count++,         this.names.count++       }     },     computed:{       arr:function(){         return this.name.price*this.name.count+this.names.price*this.names.count       }     }   }) </script>

关于vue中怎么实现计算属性问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。