當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue002_计算属性和监视

發布時間：2024/2/28 vue 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 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">姓: <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