1.过滤器：作用是处理插值的，插值就是我们{{}}中的内容，在filters中我们可以定义一些过滤器（实际上是有特殊作用的方法）定义在filter中的方法就叫过滤器
2.如：我们需要给一个钱
加上单位：
首先定义一个元素显示钱的多少
在data中将money的初始值定为100
我们给money加上一个过滤器，这里过滤器的名字叫setMoney,并且接收一个值，这个值就是我们要处理的，然后返回这个值加上单位RMB
最后在元素money后面加上|setMoney
看一下效果：
这样就通过使用过滤器的方式来给一个数值添加单位了
3.如果钱的数值过大，如12000000这样，为了使用户看起来非常简洁方便，怎么直接显示1200万呢？
思路：加上一个条件判断语句，如果大于10000，就将值除以10000，并且后面加上单位万RMB
4.过滤器可以叠加使用：
5.完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue3:选项</title>
<script src="./vue.js"></script>
<style>
body{
background:#eee;
};
#app{
background:#eee;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div id="app">
<div>{{name}}</div>
<div>{{sum}}</div>
<div v-on:click="x+=1">点我x的值加一</div>
<div>
<!--这里v-model的number属性可以将字符串转换为数字类型-->
<input type="text" v-model.number="x">
<input type="text" v-model.number="y">
</div>
<div>
<input type="text" v-model.number="x">
<select v-model="symbol">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
<option value="%">%</option>
</select>
<input type="text" v-model.number="y">
<span>={{sum}}</span>
</div>
<div>
<div>{{money | setMoney}}</div>
</div>
<div>
<div>{{like | setLike |setPerson}}</div>
</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
name:"vue选项",
x:1,
y:2,
symbol:"+",
money:12000000,
like:6314321,
},
//过滤器：用来处理插值（插值即花括号中的内容）
filters:{
//在filter中我们可以定义一些过滤器（实际上是有特殊作用的方法）
//定义在filter中的方法就叫过滤器
setMoney:function(value){//接收一个值，代表我们要处理的数
if(value>=10000){
return (value/10000) + "万RMB";
}else{
return value + "RMB"
}
//在100后面加上单位可以通过过滤器来加
//return value + "RMB";
},
setLike:function(value){
if(value<1000)
{
return value + "次";
}else if(value<10000 && value >=1000)
{
//tofixed函数用于保留小数位个数，其参数是需要保留的位数
return (value/1000).toFixed(2)+ "K次";
}else(value>=10000)
{
return (value/10000).toFixed(2) + "w次";
}
},
setPerson:function(value){
return value + "人";
}
},
//侦听属性：用来观察data中的数据和计算属性中的数据，监听他们的变化
watch:{
//监听x的数据,当x值发生变化的时候，就会执行x的回调函数函数
x:function(val,before){
console.log("x变化了");
//函数有两个参数，这两个参数是自定义的，这里val是变动之后的值
console.log(val);
//before是变动之前的值
console.log(before);
},
//监听sum的数据
sum:function(val,before){
console.log("sum变化了");
//函数有两个参数，val是变动之后的值
console.log(val);
//before是变动之前的值
console.log(before);
}
},
//计算属性
computed:{
sum:function(){
switch (this.symbol){
case "+":
return this.x+this.y;
break;
case "-":
return this.x-this.y;
break;
case "*":
return this.x*this.y;
break;
case "/":
return this.x/this.y;
break;
case "%":
return this.x%this.y;
break;
}
}
},
methods:{
btn:function(){
}
}
});
</script>
</body>
</html>