Vue监听器、过滤器
一：监听器
概述：watch监听器的用法相当于是我们监视一个数据的变化，在这个数据变化时执行一些操作，这个操作可以是任何操作
监听者里面有三个参数：
1.handler :function(newVal,oldVal){} 操作者 代表这个数据改变的时候执行什么操作 有两个参数 newVal （改变后的数据）oldVal（改变前的数据）
2.deep:false, 如果监听的是一个引用类型的数据（对象/数组），需要深度监听，true是深度监听，false是浅监听，默认是false
3.immediate:true, 实例创建的时候是否执行watch 为true时代表 监听的数据第一次被绑定的时候就开始监听。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>监听器练习</title>
</head>
<body>
<div >
<input type="text" v-model="conten">
<div>{{showconten}}</div>
<button @click="obj.name='小红'">改变数据</button>
</div>
<script src="lib/vue-2.4.0.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
conten: "",
obj: {
age: 12,
name: "小明"
},
num: 0
},
computed: {
showconten() {
return "输入的内容是" + this.conten;
}
},
watch: { //监听input框的变化情况
//在input框每次输入内容的时候,这一行在后台都会打印值:改变后的数据---改变前的数据
'conten': { //定义在watch里的conten代表监控数据conten
handler: function(newVal, oldVal) { //操作者
console.log(newVal, "---", oldVal)
},
},
//监听对象中name属性
'obj.name': {
//刚刚进入页面时 数据没有改变,默认undefined,后台打印 小明 # undefined
//当点击改变数据的时候,后台打印 小红 # 小明
handler: function(newVal, oldVal) {
console.log(newVal, '#', oldVal)
},
deep: true, //深度监听，可以监听这个对象的某个属性比如说监听 'obj.name'
immediate: true, //监听的数据第一次被绑定的时候就开始监听
},
}
})
</script>
</body>
</html>此外：
监听器可以定义在实例外面，调用vm.$watch方法来进行数据监测.
第一个参数是监听的数据，第二个参数就是一个{}里面有三个参数（跟定义在实例里面的写法一样），也可写成简写形式（只有一个handler）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>监听器练习2</title>
</head>
<body>
<div >
<button @click="num++">改变num</button>
</div>
<script src="lib/vue-2.4.0.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
num: 0
},
watch: {
//如果一个监听器不需要deep和immediate参数的时候可以直接写handler
'num': function(newVal, oldVal) {
console.log(newVal, '===', oldVal)
}
}
})
vm.$watch("num", {
handler: function(newVal, oldVal) {
console.log(newVal, '====', oldVal)
}
})
vm.$watch("num", function(a, b) {
console.log(a, '===', b)
})
</script>
</body>
</html>二：过滤器
概述：过滤器filters可以在插值语句和属性绑定v-bind的时候用 用法是 原本的值|过滤器，过滤器默认的第一个参数是你要过滤的数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过滤器练习</title>
</head>
<body>
<div >
<p v-for="count in 4">{{count|add("￥")}}</p>
</div>
<script src="lib/vue-2.4.0.js"></script>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
// 局部过滤器
filters:{
//要过滤的是在每个数字后面加￥,写法如下
add(msg,x){//msg是过滤的数据
console.log(msg)
return msg+x;
},
}
})
</script>
</body>
</html>此外：局过滤器,在所有的实例里都能用，若全局跟局部过滤器重名的话，会优先使用局部的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过滤器全局写法</title>
</head>
<body>
<div >
<img :src="src1|getimg" alt="">
</div>
<script src="lib/vue-2.4.0.js"></script>
<script type="text/javascript">
//我们要的是../01.jpg,过滤如下:
Vue.filter("getimg",function(msg){
return "../"+msg;
})
var vm=new Vue({
el:"#app",
data:{
src1:"01.jpg"
}
})
</script>
</body>
</html>- 上一篇 »java监听器，Listener学习笔记
- 下一篇 »Vue.js中过滤器，filter的使用