【Vue】Vue扫盲（一）事件标签、事件修饰符：@click.prevent @click.stop @click.stop.prevent、按键修饰符、及常用指令
【Vue】Vue扫盲（二）指令：v-for 、v-if、v-else-if、v-else、v-show
文章目录
-
- [1、 计算属性（computed）](#1、 计算属性（computed）)
- [2、监听器 watch](#2、监听器 watch)
- 3、过滤器（局部过滤器、全局过滤器）
1、 计算属性（computed）
某些结果是基于页面上之前的数据实时计算出来的， 我们可以利用计算属性。 来完成
示例：
html
<!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 可以让我们监控一个值的变化。 从而做出相应的反应。
示例：
html
<!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 是一个全局过滤器，在全局都可以用
html
<!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>结果： 1转换成了男 2 转换成了女
