vue中watch进行ajax,vue watch自动检测数据变化实时渲染的方法

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

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

对象就有键，有值。

键：就是你要监控的那个家伙，比如说$route，这个就是要监控路由的变化。或者是data中的某个变量。

值可以是函数：就是当你监控的家伙变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二个是变化后的值。

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

第三种情况厉害了。

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

第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。

第二个是deep：其值是true或false；确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。)

第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数。

watch实例

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

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

这里举个Tab的例子：

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

{{index}}

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

我再举一个搜索的例子：

// 搜索框

举了两个简单的例子，希望对大家能有所帮助～也希望大家多多支持编程之家。

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

相关文章

猜你在找的Vue相关文章

在介绍如何封装 axios 的 http 请求之前，我们先来了解下什么是 axios。axios 是通过 promise 实现对 ajax 技术 的一种封装，就像 jQuery 实现 ajax 封装一样。简单来说，ajax 技术实现了网页的局部数据刷新，axios 实现了对 ajax 的封装。平时开发 vue 项目时，不同模块都会使用 axios 请求后台的接口，代码如下：this.$axios({ method: "POST", url: "接口地址", params: { 参

随着页面数据越来越多，一次性加载所有数据会对后端服务造成压力，同时加载速度慢也会影响用户体验，所以我们通常使用分页的方式来提高性能，优化体验。很多其他博客中都是后端返回所有数据，前端再进行截取，个人认为这样并没有实现真正意义上的分页，所以本博客中由后端实现数据分页，前端只负责展示和处理。vue 分页可以通过 iView 的 Page 组件来实现，简单高效。一. vue 的 Page 组件实现前端分页1. 在 vue 文件中引入 Page 组件<template> <div&g

先来了解一下几个相关概念1、渐进式框架下面是摘自知乎的一个解答(个人认为讲述比较好的回答)：在我看来，渐进式代表的含义是：主张最少。每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。比如说，Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西：- 必须使用它的模块机制- 必须...

vue组件的定义● 组件(Component)是Vue.js最强大的功能之一● 组件可以扩展HTML元素，封装可重用代码● 在较高层面上，组件是自定义元素，Vue.js的编译器为他添加特殊功能● 有些情况下，组件也可以表现用 is 特性进行了扩展的原生的HTML元素● 所有的Vue组件同时也都是Vue实例，所以可以接受相同的选项对象(除了一些根级特有的选项)，并提供相同的生命周...

下面介绍Vue中集成的指令以及用法和作用v-bind v-on v-model v-for v-html v-text v-if v-else-if v-else v-show v-once v-pre v-cloak1、声明式渲染有两种方法A、文本插值，用两个花括号：{{内容}}html如下：<div id="app"&gt...

1、vue-router的作用与及定义vue-router可以通过html5的history API或者hash实现单页应用，即不刷新跳转，切换地址，只是页面上的组件的切换；vue-router可以实现页面间传参等其他功能；vue-router就是路由，用于页面跳转。当我点击页面上的home  按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容...

vue.js的vue-cli的理解：vue-cli是Vue的脚手架工具，帮我们写好vue.js基础代码的工具，搞定目录结构、本地调试、代码部署、热加载、单元测试等工作。vue.js开发环境搭建1、安装node.js，下载地址，安装好之后需要配置node.js系统环境变量，这里要保证node.js的版本是4版本以上2、安装全局vue-cli脚手架，用于帮助搭建所需的模板框架首先：...

使用vue-cli创建的工程的相关文件介绍1、使用vue-cli安装的项目的整个文件如下图所示：下面介绍一级目录的文件夹的作用sell2是项目名；一级目录下的文件夹名build和config都是和webpack配置相关的；文件夹node_modules是通过npm install安装的依赖代码库；文件夹src用来存放项目源码，即开发的代码都放在src文件夹下；文件夹static存放第三方静...