Vue002_计算属性和监视
生活随笔
收集整理的這篇文章主要介紹了
Vue002_计算属性和监视
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
計算屬性和監視
計算屬性
1) 在computed 屬性對象中定義計算屬性的方法
2) 在頁面中使用{{方法名}}來顯示計算的結果?
監視屬性
1) 通過通過vm 對象的$watch()或watch 配置來監視指定的屬性
2) 當屬性變化時, 回調函數自動調用, 在函數內部進行計算
計算屬性高級
1) 通過getter/setter 實現對屬性數據的顯示和監視
2) 計算屬性存在緩存, 多次讀取只執行一次getter 計算
代碼展示：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><div id="demo"><!-- placeholder 屬性提供可描述輸入字段預期值的提示信息（hint）。該提示會在輸入字段為空時顯示，并會在字段獲得焦點時消失。 -->姓: <input type="text" placeholder="First Name" v-model="firstName"><br>名: <input type="text" placeholder="Last Name" v-model="lastName"><br>姓名1(單向): <input type="text" placeholder="Full Name" v-model="fullName"><br>姓名2(單向): <input type="text" placeholder="Full Name" v-model="fullName2"><br>姓名3(雙向): <input type="text" placeholder="Full Name2" v-model="fullName3"><br></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">var vm = new Vue({el: '#demo',data: {firstName: 'George',lastName: 'Paul',fullName2: 'Paul George'},/*計算屬性將被混入到 Vue 實例中。所有 getter 和 setter 的 this 上下文自動地綁定為 Vue 實例。 */computed: {fullName: function() {return this.firstName + " " + this.lastName},fullName3: {get: function() {return this.firstName + " " + this.lastName},set: function(value){var names = value.split(" ")this.firstName = names[0]this.lastName = names[1]}}},watch: {lastName: function(newVal,oldVal){this.fullName2 = this.firstName + ' ' + newVal}}})vm.$watch('firstName',function(val){this.fullName2 = val + ' ' + this.lastName})</script></body> </html>頁面展示
總結
以上是生活随笔為你收集整理的Vue002_计算属性和监视的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue001_模板语法
- 下一篇： Vue003_class 与style