tnblog
首页
视频
资源
登录
不帅~~但是很暖心.....
排名
14
文章
75
粉丝
21
评论
43
申请别的接口数据(网络接口)
是伍尚金哇 : 敲一夜代码,流下两三行泪水,掏空四肢五体,六杯白开水七桶泡面
mui框架-移动端跳转以及传值的简单方法(修改解决方法)
是伍尚金哇 : 测试了 可以直接在 extras: { userid:'10' //自定义扩展...
数据库的varchar和nvarchar的区别
是伍尚金哇 : 没人看 自己看一个 温习一下
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术

Vue侦听器Watch

5638人阅读 2020/5/2 16:05 总访问:374183 评论:6 收藏:0 手机
分类: 前端

Vue侦听器

vue创建实例后有一个侦听器

 Vue 通过

  1. watch
选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

简答的说就是js里面的input值发生改变时能触发一个事件,但是用vue来实现就很高大上。


步骤

js代码

var watchs = new Vue({
    el: '#watch',
    data: {
      number: '123',
    },
    watch: {
      number: function () {
        console.log('改变后为:'this.number);
      }
    }
  });

说明:watch 的number是一个function,function名必须与上面的data里的number 一致,否则无效,为方便看到效果,在number里面console.log('改变后为:'this.number); 输出看看效果


html代码

<div id="watch">
      <input v-model="number" />
</div>

说明:input必须用v-model 双向绑定数据的方式



小结

当number发生改变时会触发watch里对应的function


效果






评价

忘掉过去式

2020/5/4 11:33:05

头像帅爆了

是伍尚金哇_v:@忘掉过去式我的天 说这种哦

2020/5/4 17:34:42 回复

剑轩:@是伍尚金哇_v头像是真的帅!

2020/5/4 21:00:59 回复

2020/5/5 9:02:58 回复

Murphy

2020/5/4 17:19:25

监听对象中的某个属性的话必要加上引号才行,如

watch: {
      'obj.value': function () {
        //
      }
    }

是伍尚金哇_v:@Murphy哟西,Vue大佬啊 我是自学vue的第三天

2020/5/4 19:07:25 回复

Vue.js+Layer实现表格数据绑定与更新

一:使用Vue.js绑定好数据与更新事件 使用v-on绑定好事件,在事件里边直接把该行数据传递进去,在更新方法里边就可以直接...

Vue.js 实现省市联动

HTML代码&lt;divid=&quot;pro_citys&quot;&gt; 省:&lt;selectid=&quot;provice&quot;v-on:change=&quot;prochange()&quo...

Vue.js常见问题

一:花括号当做字符串显示的问题1:检查下绑定到vue.js的id是否重复,如果id重复了,就有可能存在这种问题,因为有可能把数...

Vue.js常用指令

v-html可以把字符串当成一个html来渲染,而不是原样输出Html类似.net mvc中的@Html.Raw()方法&lt;divv-html=&quot;item.tit...

干货!div滚动到一定位置就固定他。Vue中实现一侧滚动到底部就固定

尊重原创:转载请注名出处div滚动到一定位置就固定他,例如左边的内容很多,右边的内容很少,如果不处理滚动到一定位置后右...

Vue.js常用指令,事件绑定等,Vue过滤器解析状态过滤器多个参数。Vue表格状态解析。Vue解析类型,element ui解析类型,状态,el-tag

按照html的编码显示:v-html&lt;div class=&quot;font_info&quot; v-html=&quot;item.Content&quot;&gt;{{item.Content}}&l...

Vue.js if用法

vue.js if可以做一些判断例如我们要把下面这个输出varvm=newVue({ el:&quot;#content&quot;, data:{ titles:[&quot;小明...

Vue.js 学习日记第一章-安装Vue开发环境

官网:https://cn.vuejs.org/v2/guide/ 这是一篇学习性文章,不定时更新,用来记录我学习vue.js的过程。 首先,是v...

Vue.js 学习日记第二章-在Vue中编写function及一些简单指令

官网:https://cn.vuejs.org/v2/guide/ vue.js 学习日记第一章:http://www.tnblog.net/18323015640/article/details/2...

Vue.js 学习日记第三章-Vue中的简单事件及事件修饰符

官网:https://cn.vuejs.org/v2/guide/ vue.js 学习日记第二章:http://www.tnblog.net/18323015640/article/details/2...

Vue.js 学习日记第四章-Vue中文本框数据获取与绑定及computed计算属性

官网:https://cn.vuejs.org/v2/guide/ vue.js学习日记第三章: http://www.tnblog.net/18323015640/article/details/2...

Vue.js 学习日记第五章-v-if和v-for指令的使用方式

官网:https://cn.vuejs.org/v2/guide/ vue.js学习日记第四章: http://www.tnblog.net/18323015640/article/details/2...

Vue.js 学习日记第六章-Vue组件初步学习

官网:https://cn.vuejs.org/v2/guide/ vue.js学习日记第五章: http://www.tnblog.net/18323015640/article/details/2...

Vue.js学习日记第七章-搭建脚手架

官网:https://cn.vuejs.org/v2/guide/ vue.js学习日记第六章: http://www.tnblog.net/18323015640/article/details/2...

Vue实现好友选中效果

逛过vue官网肯定会发现一个有趣的指令“v-for”,相比与以前拼接html代码确实要上档次一点,而且减少了工作量,先看一波效...

js时间格式化Vue.js时间格式化,带T 时间格式化

也可以借助moment库, 参考:https://www.tnblog.net/aojiancc2/article/details/8079moment库有点大,推荐可以使用day.js...
心里全是苦的人,只需要一点点的甜就能填满。