Vue计算属性怎么使用

这篇文章主要讲解了“Vue计算属性怎么使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue计算属性怎么使用”吧！

####computed
使用v-model实现数据渲染

<div id="app">   <div>姓名{{firstName+lastName}}</div>   <input type="text" v-model="firstName">   <input type="text" v-model="lastName"></div><script>     new Vue({        el:'#app',         data:{            firstName: "",            lastName: "",         }    })</script>

computed写函数，这个函数很特殊，它的函数名作为一个属性来使用。
计算属性是缓存的，当页面中调用一个计算属性多次的时候，后面的计算属性的值，会直接从第一次得到的结果中去获取。所以说它的性能比较高，推荐使用计算属性。

<div id="app">    <div>姓名{{fullName}}</div>   <input type="text" v-model="firstName">   <input type="text" v-model="lastName"></div><script>     new Vue({        el:'#app',         data:{            firstName: "",            lastName: "",         },         computed:{            fullName(){                return this.firstName+this.lastName            }         }    })</script>

利用计算属性实现字符串反转

<div id="app">   <p>原始语句{{ msg }}</p>    <p>计算属性 {{reversedMsg}}</p></div><script>     new Vue({        el: '#app',        data: {            msg:"hello vue"        },         computed:{            reversedMsg: function () {                return this.msg.split("").reverse().join("")            }         }    })</script>

计算商品总价

注意 compued中不能使用异步函数

感谢各位的阅读，以上就是“Vue计算属性怎么使用”的内容了，经过本文的学习后，相信大家对Vue计算属性怎么使用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！