Vue -- 数据监听
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{name}}
{{hobby}}
{{xuge_obj}} <button @click="my_click">点击改变数据</button>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
name: "旭哥",
hobby: ["唱歌", "跳舞", "请客吃饭"],
xuge_obj: {
obj1: "王铁锤",
obj2: "李刚蛋"
}
},
methods: {
my_click: function () {
// this.name = "病变"
// this.hobby.push("烫头")
// this.hobby[0] = "狼嚎"
// console.log(this.hobby)
// 用下面这种方法改变数据里的值
// app.$set(this.hobby, 0, "狼嚎")
this.xuge_obj.obj1 = "小粉嫩"
}
},
watch: {
name: {
handler: function (val, oldVal) {
console.log(val)
console.log(oldVal)
}
},
// push改变数据的长度的时候 可以监听到数据改变 新旧值是是一样的
// 不能监听到数据里值的改变 深度监听也不可以 除非用$set
hobby: {
handler: function (val, oldVal) {
console.log(val)
console.log(oldVal)
},
// deep: true
},
xuge_obj: {
handler: function (val, oldVal) {
console.log(val)
console.log(oldVal)
},
deep: true
}
}
})
</script>
</body>
</html>
- push:
改变数据的长度的时候 可以监听到数据改变, 新旧值是一样的
不能监听到数据里面值的改变, 深度监听也不可以
- $set:
改变数据的长度的时候, 可以监听到数据改变,新旧值是不同的,可以监听到数据里的值的变化
- watch:
该属性是在绑定 id= app的时候的实例化的Vue中的参数, 该参数对应的值是一个对象,该对象中
包含的是需要被监听的 data 中存在且被定义了的对象,该对象中包含的参数有: handler,deep;
-handler: 对应函数,该函数,是对被监听属性的新旧值进行操作;
-参数解释:
-val : 新值
-oldval: 旧值
- deep:是否开启深度监听
Vue -- 数据监听的更多相关文章
- vue 数据监听原理
Vue.prototype.listenDatas = function(){ for(var attr in this.$data){ this.listenData(this,attr,this. ...
- Vue获取dom和数据监听
Vue获取dom对象 在js和jq中我们都能获取dom对象例如 // 获取id=1的div标签 <div id=d1>dom对象</div> // js语法 let ele = ...
- vue中的数据监听以及数据交互
现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[,,] } }).$watch("ar ...
- Vue之数据监听存在的问题
Vue之数据监听 当数据监听的是列表时,数据发生改变,不会被监听到. // 用$set修改数组中的数组能够被监听 // app.$set(this.hobby, 0, "爱你哦") ...
- Blazor和Vue对比学习（基础1.8）：Blazor中实现计算属性和数据监听
1.7章<传递UI片断>,需要做几个案例,这部分暂停消化几天.我们先把基础部分相对简单的最后两章学习了. 计算属性和数据监听是Vue当中的概念,本质上都是监听数据的变化,然后做出响应.两者 ...
- 谈谈数据监听observable的实现
一.概述 数据监听实现上就是当数据变化时会通知我们的监听器去更新所有的订阅处理,如: var vm = new Observer({a:{b:{x:1,y:2}}}); vm.watch('a.b.x ...
- 设计模式(5): vue 不监听绑定的变量
概述 最近最近做项目的时候总会思考一些大的应用设计模式相关的问题,我把自己的思考记录下来,供以后开发时参考,相信对其他人也有用. 绑定变量 一般情况下,如果我们需要在组件中使用某个变量,会这么使用: ...
- Vue3 为何使用 Proxy 实现数据监听
博客地址:https://ainyi.com/93 vue3 响应式数据放弃了 Object.defineProperty,而使用Proxy来代替它 我们知道,在 vue2 中,实现数据监听是使用Ob ...
- 9.Vue.js 监听属性
本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化. 以下实例通过使用 watch 实现计数器: <div id = "app&q ...
随机推荐
- [Java JNI] [Windows] [Visual Studio] [DLL] [UnsatisfiedLinkError]
有时候使用 GCC for Windows 生成 DLL 动态链接库时, 由于各种原因, 即使加载了动态链接库, JVM 仍然找不到符号, 从而产生 java.lang.UnsatisfiedLink ...
- transitionEnd不起作用解决方法
var show = function(html, className) { className = className || ""; var mask = $("< ...
- docker搭建lnmp环境
1.搭建lnmp网站平台 1.创建mysql数据库容器 docker run -it -d --name lnmp_mysql -p 3308:3306 -e MYSQL_ROOT_PASSWORD= ...
- markdown & mathjax 初学笔记 latex
stackedit 1.标题大小和# # 数量代表标题大小,越多越小 2.* 斜体 * 3.** 粗体 ** 4.*** 又粗又斜 *** PS:符号紧贴 5. 分隔符 - - - 三个减号 PS: ...
- MYSQL ERROR 1045 (28000) Access denied for user (using password YES)问题的解决
我的Linux是Centos6.7的版本,本机上Mysql突然怎么连接都进不去 报错:MYSQL ERROR 1045 (28000) Access denied for user (using pa ...
- 20155324 2016-2017-2 《Java程序设计》第8周学习总结
20155324 2016-2017-2 <Java程序设计>第8周学习总结 教材学习内容总结 通用API -** 日志API** 1.~java.util.logging~包提供了日志功 ...
- Docker 容器启动 查看容器状态 - 四
1.容器两种方式进行启动 一种是基于创建一个容器并启动 docker create docker start 另一种 使用 run 创建自动启动:是状态下的停止 启动 docker start ngi ...
- Kaldi的delta特征
Delta特征是将mfcc特征(13维)经过差分得到的 它是做了一阶二阶的差分 提取的mfcc特征是13维的 然后通过delta就变成了39维 一阶差分: D(P(t))=P(t)-P(t-1) 二阶 ...
- java基础_0204：运算符
掌握Java中标识符的定义: 掌握Java中数据类型的划分以及基本数据类型的使用原则: 掌握Java运算符的使用: 掌握Java分支结构.循环结构.循环控制语法的使用: 掌握方法的定义结构以及方法重载 ...
- Leetcode#561. Array Partition I（数组拆分 I）
题目描述 给定长度为 2n 的数组, 你的任务是将这些数分成 n 对, 例如 (a1, b1), (a2, b2), ..., (an, bn) ,使得从1 到 n 的 min(ai, bi) 总和最 ...