Vue 侦听器 watch
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的更多相关文章
- Vue侦听器watch
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器.这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化.当需要在数据变化时执行异步或开销较大的操作时,这 ...
- vue侦听器 基础4
侦听器 使用方式:设置需要侦听的data里的属性名就可以了 new Vue({ el:"#app", data:{ count:0 }, watchers:{ count(){ / ...
- vue 侦听器watch 之 深度监听 deep
<template> <div> <p>FullName: {{person.fullname}}</p> <p>FirstName: &l ...
- vue 计算属性与侦听器
侦听器:顾名思义,就是用来监听数据变化用的.侦听器在vue实例中,定义变量watch来使用.监听新值newVal和旧值oldVal,具体使用方法如下: <!DOCTYPE html> &l ...
- vue从入门到进阶:计算属性computed与侦听器watch(三)
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- Vue.js之Vue计算属性、侦听器、样式绑定
前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...
- vue计算属性和侦听器
一.计算属性: main.js: var app = new Vue({ el: '#app', data: { math: 80, physics: 90, english: 30 }, compu ...
- vue 自学笔记(三) 计算属性与侦听器
一:计算属性 虽然在模板内使用表达式对属性进行处理十分便利,例如在小胡子语法里写number + 1实现对数据的简单处理,但若我们在其中加入大量的代码,使得逻辑变重,导致难以维护.例如下面的代码,并不 ...
- Vue中methods(方法)、computed(计算属性)、watch(侦听器)的区别
1.computed和methods 共同点:computed能现实的methods也能实现: 不同点:computed是基于它的依赖进行缓存的.computed只有在它的相关依赖发生变化才会重新计算 ...
随机推荐
- 利用maven的MyBatis Generator 插件自动创建代码
1.首先创建Maven工程 2.修改pom.xml文件代码如下: <project xmlns="http://maven.apache.org/POM/4.0.0" xml ...
- C++字符串转整形、浮点型stof()、atoi()、strtol()等
头文件:#include<stdlib.h>string str;stof:float val=stof(str);atoi:int val=atoi(str);atol:long val ...
- C#LeetCode刷题-双指针
双指针篇 # 题名 刷题 通过率 难度 3 无重复字符的最长子串 24.5% 中等 11 盛最多水的容器 43.5% 中等 15 三数之和 16.1% 中等 16 最接近的三数之和 3 ...
- C#LeetCode刷题之#268-缺失数字(Missing Number)
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4056 访问. 给定一个包含 0, 1, 2, ..., n 中 ...
- Java实现token的生成与验证-登录功能
一.token与cookie相比较的优势1.支持跨域访问,将token置于请求头中,而cookie是不支持跨域访问的: 2.无状态化,服务端无需存储token,只需要验证token信息是否正确即可,而 ...
- 自绘引擎时代,为什么Flutter能突出重围?
导语 | Flutter 框架是当下非常热门的跨端解决方案,能够帮助开发者通过一套代码库高效构建多平台精美应用,支持移动.Web.桌面等多端开发.但仍然有很多产品.设计.甚至开发同学并不了解 Flut ...
- jmeter性能测试入门使用参数化
我经常使用jmeter进行接口测试,这个工具还是很好用的.昨天收到一个需求,需要压测一下接口,jmeter进行接口测试,使用cvs文件进行多个数据参数化. 临时准备了一下发现忘记怎么做参数化了,自己百 ...
- C++动态规划
数塔: #include <iostream> using namespace std; int a[1000][1000]; int main(){ int n; cin>> ...
- JavaScript正则、错误处理、操作表单
一.正则表达式:用单个字符串描述或者匹配符合特定语句规则的字符串 一些字符序列组合在一起,可以简单也可以复杂模式的,可以去搜索,可以去替换 二.语法: /表达式/修饰符(可选) var para=/i ...
- 【小白学AI】随机森林 全解 (从bagging到variance)
文章转自公众号[机器学习炼丹术],关注回复"炼丹"即可获得海量免费学习资料哦! 目录 1 随机森林 2 bagging 3 神秘的63.2% 4 随机森林 vs bagging 5 ...