Vue計算屬性怎么使用

這篇文章主要講解了“Vue計算屬性怎么使用”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Vue計算屬性怎么使用”吧！

####computed
使用v-model實現(xiàn)數(shù)據(jù)渲染

<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寫函數(shù)，這個函數(shù)很特殊，它的函數(shù)名作為一個屬性來使用。
計算屬性是緩存的，當(dāng)頁面中調(diào)用一個計算屬性多次的時候，后面的計算屬性的值，會直接從第一次得到的結(jié)果中去獲取。所以說它的性能比較高，推薦使用計算屬性。

<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>

利用計算屬性實現(xiàn)字符串反轉(zhuǎn)

<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中不能使用異步函數(shù)

感謝各位的閱讀，以上就是“Vue計算屬性怎么使用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Vue計算屬性怎么使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！