Vue监听器过滤器
Posted zhd09
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 id="app"> <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 id="app">
<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 id="app">
<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 id="app">
<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>
以上是关于Vue监听器过滤器的主要内容，如果未能解决你的问题，请参考以下文章