目录前言一、侦听器的基本用法二、侦听器的格式三、实现刚进入页面就触发监听和深度监听深度监听深度监听返回侦听对象子属性的值最后前言 Vue 通过 watch 选项提
Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
<div id="demo">{{ fullName }}</div>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar' },
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName },
lastName: function (val) {
this.fullName = this.firstName + ' ' + val } } })
这段代码的作用就是监听firstName和fullName,当它们发生变化的时候,就改变fullname的值。
方法格式的侦听器
对象格式的侦听器
刚进入页面就触发监听
通过添加immediate选项来实现
const vm = new Vue({
el: '#app',
data: {
info: {
username: 'admin'
}
},
watch:{
info:{
handle(newVal){
console.log(newVal)
},
// 实现刚进入页面就触发监听
immediate: true
}
}
})
在上述代码中,当username发生变化时我们是不能监听成功的,因为变化的是对象属性的值,因此需要深度监听,添加deep选项即可
const vm = new Vue({
el: '#app',
data: {
info: {
username: 'admin'
}
},
watch:{
info:{
handle(newVal){
console.log(newVal)
},
// 实现刚进入页面就触发监听
immediate: true,
// 实现深度监听,只要对象中的任何一个属性变化了,都会触发“对象的侦听”
deep: true
}
}
})
上述代码中执行结果是打印info这个对象,我们希望打印的username的值,需要加上newVal.username还是比较麻烦的,我们其实可以直接监听并打印变化子属性的值,只需要在要监听的子属性外面加上一层单引号即可:
const vm = new Vue({
el: '#app',
data: {
info: {
username: 'admin'
}
},
watch:{
'info.username': {
handle(newVal){
console.log(newVal)
}
}
}
})
⚽本文介绍了Vue中的侦听器的基本使用以及如何实现深度监听,希望大家阅读完有一定的收获呦~
到此这篇关于Vue中侦听器基本用法的文章就介绍到这了,更多相关Vue侦听器用法内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: Vue中侦听器的基本用法示例
本文链接: https://www.lsjlt.com/news/132009.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0