當(dāng)前位置：
首頁 >
(第二篇)Vue计算属性、侦听器、过滤器
發(fā)布時(shí)間：2024/10/6
119
豆豆
生活随笔
收集整理的這篇文章主要介紹了
(第二篇)Vue计算属性、侦听器、过滤器
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1.計(jì)算屬性和偵聽器
<!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"><!-- 某些結(jié)果是基于數(shù)據(jù)實(shí)時(shí)計(jì)算出來的，我們可以計(jì)算屬性來完成 --><ul><li>西游記；價(jià)格：{{xyPrice}}，數(shù)量：<input type="number" v-model="xyNum"></li><li>水滸傳；價(jià)格：{{shPrice}}，數(shù)量：<input type="number" v-model="shNum"></li><li>總價(jià)：{{totalPrice}}</li>{{msg}}</ul></div><script>//watch可以讓我們監(jiān)控質(zhì)的變化，而做出相應(yīng)的反應(yīng)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="數(shù)量超過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><!-- 過濾器常用來處理文本，過濾器可以用在兩個(gè)地方：雙花括號插值和v-bind 表達(dá)式 --><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>總結(jié)
以上是生活随笔為你收集整理的(第二篇)Vue计算属性、侦听器、过滤器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Redis哨兵主备切换的数据丢失及Red
- 下一篇： (第四篇)Vue生命周期