Vue.js 监视属性
1.基本用法
- 用途：对某个数据进行监听并执行对应的回调，可以是data中的数据，还可以是计算属性
- 语法：在watch对象下添加字段，字段名为要监听的数据，字段值一般是fucntion，也可以是对象
- 回调函数有2个参数：数据发生改变后的值，数据发生改变前的值
<script>
var vm = new Vue({
el:"#app",
data(){
return {
title:"hello world",
}
},
watch:{
//监听data中的值
title(newVal,oldVal){
console.log('now = ',newVal,oldVal)
},
//监听计算属性
reversedTitle(newVal,oldVal){
console.log('nowSecond = ',newVal,oldVal)
}
},
computed:{
reversedTitle: function () {
// `this` 指向 vm 实例
return this.title.split('').reverse().join('')
}
}
})
//修改data中的数据
setTimeout(()=>{
vm.title = "vue.js"
},1000)
</script>
执行结果:
title = vue.js hello world
index.html:43 reversedTitle = sj.euv dlrow olleh
2.监听对象内部属性的变化
- 如果要监听多层次的数据，例如a.b.c，则属性名需要用引号包裹起来
- 如果父级对象的值发送变化，则会使这个监视属性的回调函数执行
<body>
<div id="app">
<p>{{name}}</p>
<button @click="test">修改wife.name</button>
<button @click="test2">修改wife</button>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data: {
name: '郭靖',
age: 20,
wife: {
name: '黄蓉',
sex: '女'
}
},
watch: {
//监听wife中的name属性
'wife.name'(newVal,oldVal){
console.log('wife.name发生了改变')
},
//监听wife
'wife'(newVal,oldVal){
console.log('wife发生了改变')
}
},
methods:{
test(){
this.wife.name = "'黄帮主'"
},
test2(){
this.wife = {name:'我不是黄蓉',sex:'women'}
}
}
})
</script>
运行结果表明，无论是他父级对象的值发生了改变，还是它本身的值发生了改变，都会使这个监视属性的回调函数执行。
3.监听路由变化
提示：路由的路径信息保存在$route.path中
watch:{
'$route.path':function(newval){
console.log('change')
}
}
4.数组问题
- 直接通过下标对数组元素进行赋值不会触发页面更新，需要使用push()/shift()/splice()等方法来更新数组（这些方法应该是重新封装过）
- 但是v-model指令绑定的数组元素没有这个问题，能更新页面，也能触发相关watch
5.深度监听
- 将监听属性的值设定为对象，则可以配置更多的特性
- deep:深度监听，默认false，不能监听对象内部的变化
- handler:回调函数
- immediate:页面初始化时是否触发回调，默认false
var vm = new Vue({
el:'#app',
data: {
name: '郭靖',
age: 20,
wife: {
name: '黄蓉',
sex: '女'
}
},
watch: {
wife:{
deep:true,
handler:function(newVal,oldVal){
console.log('value is change')
},
immediate:true
}
}
})
vm.wife.name = '黄帮主' // 触发wife属性对应的回调
Vue.js 监视属性的更多相关文章
- Vue.js 计算属性是什么
Vue.js 计算属性是什么 一.总结 一句话总结: 模板 表达式 维护 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...
- Vue.js 计算属性(computed)
Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...
- Vue.js 计算属性
Vue.js 计算属性 使用计算属性的实例: <!DOCTYPE html> <html> <head> <meta cahrset="utf-8& ...
- vue.js计算属性 vs methods
计算属性:Vue.js 模板内的表达式非常便利,但是缺点就是只能用于简单的运算,如果模板中有太多的逻辑运算会让模板不堪重负且难以维护.恰恰计算属性可以处理复杂的逻辑运算,也就是说对于任何复杂逻辑你都应 ...
- Vue.js 计算属性computed和methods的区别
在vue.js中,有methods和computed两种方式来动态当作方法来用的 如下: 两种方式在这种情况下的结果是一样的 写法上的区别是computed计算属性的方式在用属性时不用加(),而met ...
- Vue.js 计算属性的秘密
计算属性是一个很邪门的东西,只要在它的函数里引用了 data 中的某个属性,当这个属性发生变化时,函数仿佛可以嗅探到这个变化,并自动重新执行. 上述代码会源源不断的打印出 b 的值.如果希望 a 依赖 ...
- Vue.js：计算属性
ylbtech-Vue.js:计算属性 1.返回顶部 1. Vue.js 计算属性 计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 可以看下以下反转字符串的例子: 实例 ...
- Vue.js学习笔记（一） - 起步
本篇将简单介绍一下Vue.js,并在Node.js环境下搭建一个简单的Demo. 一.简介 我个人理解,Vue.js是一套前端视图层的框架,它只关心视图展示和数据绑定,它的一些语法与Angular 1 ...
- vue.js 常用语法总结（一）
作者:曾萍,目前就职于京东商城. 概述 2016年已经结束了.你是否会思考一下,自己在过去的一年里是否错过一些重要的东西?不用担心,我们正在回顾那些流行的趋势.通过比较过去12个月里Github所增加 ...
- vue.js应用开发笔记
看vue.js有几天了,之前也零零散散的瞅过,不过一直没有动手去写过demo,这几天后台事比较少,一直在讨论各种需求(其实公司对需求还是比较重视与严谨的,一个项目需求讨论就差不多一周了,这要搁之前,天 ...
随机推荐
- TS2Vec: 面向通用的时间序列表示《TS2Vec: Towards Universal Representation of Time Series》(时间序列、对比学习、多尺度特征(池化操作)、分层对比、上下文一致性(时间戳掩码+随机裁剪))
今天是2024年5月22日,10:24,今天看这篇经典的论文(如果你问我为什么最近频繁看论文,因为我的创新点无了,要找创新点+太菜了,菜就多看多学). 论文:TS2Vec: Towards Unive ...
- Angular 18+ 高级教程 – Component 组件 の Attribute Directives 属性型指令
介绍 指令就是没有模板的组件.除了模板其它的都有,比如 selector.inject.@Input.lifecycle 等等. 那既然都有完整的组件了,为什么还搞一个少掉模板的指令呢? 很简单啊,因 ...
- Angular 18+ 高级教程 – Component 组件 の Dependency Injection & NodeInjector
前言 在 Dependency Injection 依赖注入 文章中,我们学习了 50% 的 Angular DI 知识,由于当时还不具备组件知识,所以我们无法完成另外 50% 的学习. 经过了几篇组 ...
- Asp.net core 学习笔记之 authen + autho + oidc + oauth + spa 第九篇 (external login)
External login 就是指通过 Google, Microsoft, Facebook account 做登入. https://docs.microsoft.com/en-us/aspne ...
- BOOT跳转APP，STM32F4正常，但是GD32F4起不来的问题
问题描述: stm32F4可以正常从BOOT跳转执行APP,到了GD32F4,卡死在APP程序的这里. 临时解决办法: APP程序内 把这两句代码都屏蔽掉就好了. 相关资料搜索: 最佳解决方案: ...
- Qt中一些关于中文的使用
本文包含以下内容: 中文编码 按中文字典排序 中文首字母查找 版本:Qt5.14.2 中文编码 在一些老项目中,发现项目中使用的文件是GBK编码,而新项目使用的是Unicode编码,在有一些操 ...
- 6How To Use Messages With Flask - Flask Fridays #6 10:43
消息闪现 消息闪现 {% for message in get_flashed_messages() %} <div class="alert alert-success alert ...
- 将Vscode添加右键打开文件夹功能
1. wan + r 输入 regedit 打开注册表 注册表编辑 2. 找到 HKEY_CLASSES_ROOT\*\shell分支 3. 在shell下新建"VisualCode&quo ...
- 6.19 成都站云原生 Meetup，KubeSphere 和 APISIX 等你来！
以容器技术和容器编排为基础的云原生应用,被越来越多的企业用户接受和使用,并且在生产环境中使用容器技术的比例逐年增加.KubeSphere 作为一款面向应用的开源容器混合云,经过 3 年的发展和 10 ...
- 你在使用 KubeSphere 吗？
如果你正在使用 KubeSphere,欢迎在社区分享你的使用和实践经验,赢取 KubeSphere 周边礼品(T恤.帆布袋.徽章等)以及 Kubernetes 技术书籍. 为什么我们要征集用户案例? ...