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計算屬性怎么使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！