(第二篇)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>