vue watch自动检测数据变化实时渲染的方法


Posted in Javascript onJanuary 16, 2018

本文介绍了vue watch自动检测数据变化实时渲染的方法,分享给大家,具体如下:

首先确认 watch是一个对象,一定要当成对象来用。

对象就有键,有值。

键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化。或者是data中的某个变量。
值可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值。

值也可以是函数名:不过这个函数名要用单引号来包裹。

第三种情况厉害了。

值是包括选项的对象:选项包括有三个。

  1. 第一个handler:其值是一个回调函数。即监听到变化时应该执行的函数。
  2. 第二个是deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。)
  3. 第三个是immediate:其值是true或false;确认是否以当前的初始值执行handler的函数。

watch实例

vue watch自动检测数据变化实时渲染的方法

上次讲到可以使用this.$set或vm.set来动态的改变,已经渲染在页面上的数据(添加,删除)重新计算重新渲染。

有时候你会需要,动态的改变某个数据或者值,然后根据你改变的值再做出其它的处理操作(如:显示,隐藏,增,删)等,如下面代码例子:

这里举个Tab的例子:

在vue的项目里新建一个Tab的组件页面

<template>
{{index}}
 <div>
   <div @click="showFun(0)">Tab1</div>
   <div @click="showFun(1)">Tab2</div>
   <div @click="showFun(2)">Tab3</div>
 </div>
 <div>
   <div v-if="index == 0">cont1</div>
   <div v-if="index == 1">cont1</div>
   <div v-if="index == 2">cont1</div>
 </div>
</template>
<script>
export default {
 data(){
  return {
    index: 0 // 索引
  }
 },
watch:{ // 实时检测
  index(idx){ //实时监听index的变化
    console.log(idx) //在这里你可以再根据idx的值,做出其它的操作
  }
},
 methods:{
   showFun(idx){
     this.index = idx
   }
 }
}
</script>

watch可以让你自定义一个侦听器,当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的

我再举一个搜索的例子:

<template>
 <input v-model="value" /> // 搜索框
</template>
<script>
export default {
 data(){
  return {
    value: '' // 值
  }
 },
 watch:{
   value(val){ // 实时监听数据变化
     this.wat_fun(val)
   }
 }, 
 methods:{
   wat_fun(val){ // 这里可以调用搜索api接口
    console.log(val)
   }
 }
}
</script>

举了两个简单的例子,希望对大家能有所帮助~也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery text()要注意啦
Oct 30 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
Jul 29 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
灵活的理解JavaScript中的this指向
Feb 25 Javascript
浅谈js基本数据类型和typeof
Aug 09 Javascript
详解wow.js中各种特效对应的类名
Sep 13 Javascript
详解使用路由延迟加载 Angular 模块
Oct 12 Javascript
在Vue中使用icon 字体图标的方法
Jun 14 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
Mar 01 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 #Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 #Javascript
解析Angular 2+ 样式绑定方式
Jan 15 #Javascript
基于jquery的on和click的区别详解
Jan 15 #jQuery
仿淘宝JSsearch搜索下拉深度用法
Jan 15 #Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 #Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 #Javascript
You might like
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
Laravel中Trait的用法实例详解
2016/03/16 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
jquery如何判断表格同一列不同行input数据是否重复
2014/05/14 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
jQuery Mobile 和 Kendo UI 的比较
2016/05/05 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
js初始化验证实例详解
2016/11/26 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
2020/03/02 Javascript
如何构建 vue-ssr 项目的方法步骤
2020/08/04 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
微信小程序实现自定义底部导航
2020/11/18 Javascript
python视频按帧截取图片工具
2019/07/23 Python
Django 创建/删除用户的示例代码
2019/07/24 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
python django中8000端口被占用的解决
2019/12/17 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
欧洲最大的化妆品连锁公司:Douglas道格拉斯
2017/05/06 全球购物
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
波兰汽车配件网上商店:iParts.pl
2020/09/08 全球购物
护理学应聘自荐书范文
2014/02/05 职场文书
班长竞选演讲稿
2014/04/24 职场文书
小学清明节活动总结
2014/07/04 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
语文教师求职信范文
2015/03/20 职场文书
文明礼貌主题班会
2015/08/14 职场文书
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python