Vue数据的监听

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="x-ua-compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <title>Title</title>
 8     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
 9 </head>
10 <body>
11 <div id="app">
12     {{name}}
13     {{hobby}}
14     {{xuge_obj}}
15
16     <button @click="my_click">点击改变数据</button>
17 </div>
18 <script>
19     const app = new Vue({
20         el: "#app",
21         data: {
22             name: "旭哥",
23             hobby: ["唱歌", "跳舞", "请客吃饭"],
24             xuge_obj: {
25                 obj1: "王铁锤",
26                 obj2: "李刚蛋"
27             }
28         },
29         methods: {
30             my_click: function () {
31                 // this.name = "病变"
32                 // this.hobby.push("烫头")
33                 // this.hobby[0] = "狼嚎"
34                 // console.log(this.hobby)
35                 // 用下面这种方法改变数据里的值
36                 // app.$set(this.hobby, 0, "狼嚎")
37                 this.xuge_obj.obj1 = "小粉嫩"
38             }
39         },
40         watch: {
41             name: {
42                 handler: function (val, oldVal) {
43                     console.log(val)
44                     console.log(oldVal)
45                 }
46             },
47             // push改变数据的长度的时候 可以监听到数据改变 新旧值是是一样的
48             // 不能监听到数据里值的改变 深度监听也不可以 除非用$set
49             hobby: {
50                 handler: function (val, oldVal) {
51                     console.log(val)
52                     console.log(oldVal)
53                 },
54                 // deep: true
55             },
56             xuge_obj: {
57                 handler: function (val, oldVal) {
58                     console.log(val)
59                     console.log(oldVal)
60                 },
61                 deep: true
62             }
63         }
64     })
65 </script>
66 </body>
67 </html>

原文地址:https://www.cnblogs.com/wdbgqq/p/9846760.html

时间: 2024-11-05 23:19:55

Vue数据的监听的相关文章

关于vue中滚动监听失效问题

在vue项目中, 监听window滚动失效;并且document.body.scrollTop一直是0的情况! 查找了许多资料;并没有找到合理的解决方案; 最中发现,在index.html设置了html,body的宽高设置成了100%; 这样会造成window.onscroll监听不到正确的滚出高度(恒为0); 不和你们多bb:解决方案: 将html,body的height设置为auto;即可解决!!

vue.js 组件监听

一.在通过点击事件触发的子组件中: addCart(event) { if (!event._constructed) { return; } if (!this.food.count) { Vue.set(this.food, 'count', 1); } else { this.food.count++; } this.$emit('cartadd', event.target) },// cartcontrol.vue组件 二.在父组件中 <div class="cartcontro

vue 前端处理监听关键字搜索

根据组件的业务需要,有时候搜索是把关键字返回给后台,后台处理后再把数据返回给前端渲染(多次请求服务器):有时候是前端把页面的数据全部获取下来,前端处理关键字的搜索(影响页面加载) 我这个文章是介绍第二种情况,主要是要先了解es6的filter()和includes() filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素.不会对空数组进行检测.不会改变原始数组. array.filter(function(currentValue,index,arr),

vue浏览器返回监听

具体步骤如下: 1.挂载完成后,判断浏览器是否支持popstate mounted(){ if (window.history && window.history.pushState) { history.pushState(null, null, document.URL); window.addEventListener('popstate', this.goBack, false); } }, 2.页面销毁时,取消监听.否则其他vue路由页面也会被监听 destroyed(){ wi

VUE的watch监听对象

因为普通监听对象时,其实监听的该对象存放的堆地址,只有声明关键子字(deep: true)才能监听整个对象中所有属性变化: 当然如果监听的对象只有一两个属性,也可以直接分别监听其属性: //声明对象 data() { return { obj: { name: '黄国华' } } }, watch: { obj: { handler: function(newVal, oldVal) { console.log(newVal, oldVal); //因为对象为引用类型数据,所以新旧值其实是同一个

vue 父组件监听子组件生命周期

1.方法一 使用$on和$emit // Parent.vue <Child @mounted="doSomething"/> // Child.vue mounted() { this.$emit("mounted"); } 2.使用hook // Parent.vue <Child @hook:mounted="doSomething" ></Child> doSomething() { console.l

layui数据表格监听按钮问题

layui官网文档源码 原始容器 <table id="demo" lay-filter="test"></table> 工具栏模板: <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <button class="layui-btn lay

vue 在一个页面监听、定时用了之后要销毁,不然在其他页面会报错

1.在一个页面监听.定时用了之后要销毁 2.或者在监听.定时的运行代码,加判断限制 销毁: 加判断: 原文地址:https://www.cnblogs.com/XUYIYUAN/p/12368672.html

vue watch属性监听对象变化。

有时候要监听对象的变化. 我一般用来做一堆input 表单里面条件是否达到,然后按钮的颜色变化. data: { return: { form: { name: '', tel: '', product_value: [], // 产品数组第一个是第一级,第二个是第二级. product_label: '', //产品选择选择对应的文字 xinghao_value: '', // 型号的值 xinghao_label: '', // 型号的名字 guige_value: '', // 规格的值