(第二篇)Vue计算属性、侦听器、过滤器
生活随笔
收集整理的這篇文章主要介紹了
(第二篇)Vue计算属性、侦听器、过滤器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.計算屬性和偵聽器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../node_modules/vue/dist/vue.js"></script> </head> <body><div id="app"><!-- 某些結果是基于數據實時計算出來的，我們可以計算屬性來完成 --><ul><li>西游記；價格：{{xyPrice}}，數量：<input type="number" v-model="xyNum"></li><li>水滸傳；價格：{{shPrice}}，數量：<input type="number" v-model="shNum"></li><li>總價：{{totalPrice}}</li>{{msg}}</ul></div><script>//watch可以讓我們監控質的變化，而做出相應的反應new Vue({el:"#app",data:{xyPrice:81,shPrice:108,xyNum:1,shNum:1,msg:""},computed: {totalPrice(){return this.xyPrice*this.xyNum+this.shPrice*this.shNum;}},watch:{xyNum(newVal,oldVal){if(newVal>=3){this.msg="數量超過3";this.xyNum=3;}else{this.msg="";}}}})</script> </body> </html>2.過濾器
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../node_modules/vue/dist/vue.js"></script> </head><body><!-- 過濾器常用來處理文本，過濾器可以用在兩個地方：雙花括號插值和v-bind 表達式 --><div id="app"><ul><li v-for="user in userList">{{user.id}}===>{{user.name}}==>{{user.gender==0?'女':'男'}}==>{{user.gender | genderFilter}}==>{{user.gender | gFilter}}</li></ul></div><script>Vue.filter("gFilter", function (val) {if (val == 1) {return "男~~~~";} else {return "女~~~~";}});new Vue({el: "#app",data: {userList: [{ id: 1, name: "夏琳", gender: 0 },{ id: 1, name: "尹浩", gender: 1 }]},filters: {genderFilter(val) {if (val == 1) {return "男";} else {return "女";}}}})</script> </body></html>總結
以上是生活随笔為你收集整理的(第二篇)Vue计算属性、侦听器、过滤器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Redis哨兵主备切换的数据丢失及Red
- 下一篇： (第四篇)Vue生命周期