watch

最新推荐文章于 2024-04-18 21:21:58 发布

weixin_44889992

最新推荐文章于 2024-04-18 21:21:58 发布

阅读量469

点赞数 1

分类专栏： vue 文章标签： watch

本文链接：https://blog.csdn.net/weixin_44889992/article/details/89414768

版权

vue 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

watch

作用：
用来监听数据的变换，当数据模型（data选项 M）发生改变时， watch就会触发
使用
两种用法：
1. key的value值是一个函数

new Vue({
watch: {
key(value,oldvalue){}
}
})

第一种用法的例子：

<!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>Document</title>
<script src="../../basic-source/vue.js"></script>
</head>
<body>
<div id="app">
<div>
姓： <input type="text" v-model = "firstName">
</div>
<div>
名： <input type="text" v-model = "lastName">
</div>
<div>
全称; <input type="text" v-model = "fullName">
</div>
</div>
</body>
<script>
/*
业务：
1. 当我写好姓和名 ， 全称自动显示
*/
new Vue({
el: '#app',
data: {
firstName: '',
lastName: '',
fullName: ''
},
watch: {
firstName(val){
this.fullName = val + this.lastName
},
lastName(val){
this.fullName = this.firstName + val
},
fullName(val){
console.log( val )
this.firstName = val.slice(0,1)
this.lastName = val.slice(1)
}
}
})
</script>
</html>

key的value值是一个对象

new Vue({
watch: {
key： {
deep: true/false 深入监听,
handler(value,oldvalue){} // 监听的处理函数
}
}
})

watch中的key指的就是data选项中key
*/
案例：

<!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>Document</title>
<script src="../../basic-source/vue.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello vue.js'
},
watch: {
msg: {
deep: true,
handler: function(){
alert('msg发生改变了')
}
}
}
})
</script>
</html>

weixin_44889992

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
watch

watch作用：用来监听数据的变换，当数据模型（data选项 M）发生改变时， watch就会触发使用两种用法：key的value值是一个函数new Vue({watch: {key(value,oldvalue){}}})第一种用法的例子：<!DOCTYPE html><html lang="en"><head>&...
复制链接

扫一扫