(第二篇)vue计算属性、侦听器、过滤器 -尊龙游戏旗舰厅官网
尊龙游戏旗舰厅官网
收集整理的这篇文章主要介绍了
(第二篇)vue计算属性、侦听器、过滤器
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
1.计算属性和侦听器
<html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>documenttitle><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.xynumthis.shprice*this.shnum;}},watch:{xynum(newval,oldval){if(newval>=3){this.msg="数量超过3";this.xynum=3;}else{this.msg="";}}}})script> body> html>2.过滤器
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>documenttitle><script src="../node_modules/vue/dist/vue.js">script> head><body><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计算属性、侦听器、过滤器的全部内容,希望文章能够帮你解决所遇到的问题。
- 上一篇:
- 下一篇: (第四篇)vue生命周期