1. 侦听器 watch


Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性

当属性发生改变时,自动触发属性对应的侦听器。

当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

2. 基础用法


当 msg 属性的值发生改变时,就会触发侦听器的执行

<div id="app">
<input type="text" v-model="msg">
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 'Hello'
},
watch: {
msg: function(){
console.log(this.msg)
}
}
})
</script>

3. 应用场景:用户注册时,验证用户名是否存在


<div id="app">
用户名: <input type="text" name="name" v-model.lazy="username">
<span :style="msgStyle">{{ msg }}</span>
<br>
密码: <input type="password" name="pass">
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: '',
username: '',
msgStyle: ''
},
watch: {
username: function(){
// 发送ajax请求 验证用户名
if (this.username == 'liang') {
this.msg = '该用户名已存在'
this.msgStyle = {
color: 'red',
fontWeight: 'bold'
}
} else {
this.msg = '用户名可以注册'
this.msgStyle = {
color: 'green',
fontWeight: 'bold',
}
}
}
}
})
</script>

Vue 侦听器 watch的更多相关文章

  1. Vue侦听器watch

    虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器.这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化.当需要在数据变化时执行异步或开销较大的操作时,这 ...

  2. vue侦听器 基础4

    侦听器 使用方式:设置需要侦听的data里的属性名就可以了 new Vue({ el:"#app", data:{ count:0 }, watchers:{ count(){ / ...

  3. vue 侦听器watch 之 深度监听 deep

    <template> <div> <p>FullName: {{person.fullname}}</p> <p>FirstName: &l ...

  4. vue 计算属性与侦听器

    侦听器:顾名思义,就是用来监听数据变化用的.侦听器在vue实例中,定义变量watch来使用.监听新值newVal和旧值oldVal,具体使用方法如下: <!DOCTYPE html> &l ...

  5. vue从入门到进阶:计算属性computed与侦听器watch(三)

    计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...

  6. Vue.js之Vue计算属性、侦听器、样式绑定

    前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...

  7. vue计算属性和侦听器

    一.计算属性: main.js: var app = new Vue({ el: '#app', data: { math: 80, physics: 90, english: 30 }, compu ...

  8. vue 自学笔记(三) 计算属性与侦听器

    一:计算属性 虽然在模板内使用表达式对属性进行处理十分便利,例如在小胡子语法里写number + 1实现对数据的简单处理,但若我们在其中加入大量的代码,使得逻辑变重,导致难以维护.例如下面的代码,并不 ...

  9. Vue中methods(方法)、computed(计算属性)、watch(侦听器)的区别

    1.computed和methods 共同点:computed能现实的methods也能实现: 不同点:computed是基于它的依赖进行缓存的.computed只有在它的相关依赖发生变化才会重新计算 ...

随机推荐

  1. ALGEBRA-3 线性映射

    不求甚解 [零空间] 零空间对加法和标量乘法封闭,因此属于子空间:

  2. c++ sort函数三个参数解释

    第一个参数 一般为 排序的起始点 vector.begin()(起点) 或者其他位置 第二个参数 一般为 排序的终止点 vector.end() (终点) 或者其他位置 第三个参数是排序函数 对于一些 ...

  3. AndroidStudio新建项目报错build failed

    AndroidStudio新建项目报错build failed 报错信息 org.gradle.initialization.ReportedException: org.gradle.interna ...

  4. 二、JAVA 的了解与安装

    1.java了解 1.1.java三大版本 javaSE:标准版(桌面程序,控制台开发...) javaME:嵌入式开发(手机.小家电...)[可以忽略] javaEE:企业版开发(web端,服务器开 ...

  5. html表格、表单

    知识点一:表格 1.表格标签  table 2.表格的组成  行 tr  单元格  td 3.建立表格步骤 1.建立表格, 2.判断行数和列数 3.用行去包含单元格 4.在每个单元格中去添加内容 4. ...

  6. CSS3动画旋转——(图片360°旋转)

    今天在重构网页特效的时候,想着用到一个css3的旋转特效.简单来一个demo. html <div class="box"> <img src="./y ...

  7. Kubernetes 的层级命名空间介绍

    原文链接:https://fuckcloudnative.io/posts/introducing-hierarchical-namespaces/ 在单个 Kubernetes 集群上安全托管大量用 ...

  8. PythonCrashCourse 第八章习题

    编写一个名为display_message() 的函数,它打印一个句子,指出你在本章学的是什么.调用这个函数,确认显示的消息正确无误 def display_message(): print(&quo ...

  9. ubuntu 构建 deb 安装包

    源码包下载:http://mirrors.163.com/ubuntu/ 编译工具安装: apt-get install dpkg-dev 以openvswitch为例: wget http://mi ...

  10. pandas外部数据的读取构造数据框-文本文件读取(一种utf-8中文编码乱码处理经验)

    上面一篇文章有记录pandas构造数据框的方式有二维数组,字典,嵌套的列表和元组等,本篇用于介绍通过外部数据读取的方式来构造数据框. python读取外部数据集的时候,这些数据集可能包含在文本文件(c ...