【Vue】Vue扫盲（三）计算属性和监听器

【Vue】Vue扫盲（一）事件标签、事件修饰符：@click.prevent @click.stop @click.stop.prevent、按键修饰符、及常用指令

【Vue】Vue扫盲（二）指令：v-for 、v-if、v-else-if、v-else、v-show

文章目录

- 1、计算属性（computed）
- 2、监听器 watch
- 3、过滤器（局部过滤器、全局过滤器）

1、计算属性（computed）

某些结果是基于页面上之前的数据实时计算出来的，我们可以利用计算属性。来完成
示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>计算属性和监听器</title>
</head>
<body><div id="app" style="border: 1px red; margin: auto;"><ul><li>西游记，价格{{xyjPrive}}，数量:<input type="number" v-model="xyjNum"/></li><li>水浒传，价格{{shzPrice}}，数量:<input type="number" v-model="shzNum"/></li><li>总价{{totalPrice}}</li></ul></div><script src="../node_modules/vue/dist/vue.js"></script><script>let vm = new Vue({el:"#app",data:{xyjPrive:99.98,shzPrice:98,xyjNum:1,shzNum:1},methods: {},computed:{totalPrice(){return this.xyjPrive*this.xyjNum+this.shzPrice*this.shzNum;}}})</script>
</body>
</html>

结果1：
在这里插入图片描述
结果2：

2、监听器 watch

watch 可以让我们监控一个值的变化。从而做出相应的反应。
示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>计算属性和监听器</title>
</head>
<body><div id="app" style="border: 1px red; margin: auto;"><ul><li>西游记，价格{{xyjPrive}}，数量:<input type="number" v-model="xyjNum"/></li><li>水浒传，价格{{shzPrice}}，数量:<input type="number" v-model="shzNum"/></li><li>总价{{totalPrice}}</li>提示信息：{{msg}}</ul></div><script src="../node_modules/vue/dist/vue.js"></script><script>let vm = new Vue({el:"#app",data:{xyjPrive:99.98,shzPrice:98,xyjNum:1,shzNum:1,msg:""},methods: {},computed:{totalPrice(){return this.xyjPrive*this.xyjNum+this.shzPrice*this.shzNum;}},watch:{ //watch可以让我们监控一个值的变化，从而做出反应xyjNum:function(newVal,oldVal){ //同等写法：xyjNum(newVal,oldVal)if(newVal>=3){this.msg="西游记库存没有更多了";this.xyjNum=3;}else{this.msg="";}}}})</script>
</body>
</html>

效果1：
西游记的数量不能超过3，如果超过3，则无法在增加，一直是三。并给出提示库存超出
在这里插入图片描述

在这里插入图片描述

效果2：
在这里插入图片描述

3、过滤器（局部过滤器、全局过滤器）

过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。在很多不同的
情况下，过滤器都是有用的，比如尽可能保持 API 响应的干净，并在前端处理数据的格式。

示例：展示用户列表性别显示男女

下面的 genderFilter 一个局部过滤器，只能在当前的Vue监听的视图中使用
gFilter 是一个全局过滤器，在全局都可以用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>过滤器</title>
</head><body><!-- 过滤器通常用来处理文本格式化的操作，过滤器可以用在两个地方，双花括号插值和v-bind表达式 --><div id="app"><ul><li v-for="user in userList" :key="user.id">{{user.id}}==>{{user.name}}==>{{user.gender}}==>{{user.gender ==1?"男":"女"}} <!-- 简单的可以通过三目运算符来完成转换，如果复杂的则通过过滤器进行转化 -->====使用局部过滤器后的结果：{{user.gender|genderFilter}}====》 使用全局过滤器后的结果：{{user.gender|gFilter}}</li> <!-- 上面的{{user.gender|genderFilter}} 中的 | 是管道符的作用 ，是把前面user.gender的值传给了 后面的genderFliter中进行处理，并返回一个值--></ul></div><script src="../node_modules/vue/dist/vue.js"></script><script>//第一个参数：过滤器名字，第二个参数是函数体（真正的处理逻辑）Vue.filter("gFilter",function(val){if (val == 1) {return "男~~~";} else {return "女~~~";}})let vm = new Vue({el: "#app",data: {userList: [{ id: 1, name: 'jacky', gender: 1 },{ id: 2, name: 'peter', gender: 0 }]},methods: {},filters: {//由于这个过滤器写在单个的Vue实例中，所以叫做局部过滤器，我们还有全局过滤器一说genderFilter(val) {if (val == 1) {return "男";} else {return "女";}}}})</script>
</body></html>