当前位置： ag凯发k8国际 > 前端技术 > vue >内容正文

vue

(第二篇)vue计算属性、侦听器、过滤器 -ag凯发k8国际

发布时间：2024/10/6 vue 28 豆豆

ag凯发k8国际收集整理的这篇文章主要介绍了 (第二篇)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>

总结

以上是ag凯发k8国际为你收集整理的(第二篇)vue计算属性、侦听器、过滤器的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得ag凯发k8国际网站内容还不错，欢迎将ag凯发k8国际推荐给好友。