vue watch 的简单使用
在项目开发中遇到的需求,这点写第一个dome
监听父组件传过来的值发送变化
在子组件中
<script>
export default {
props:['message'],//父组件传过来的值
data(){
return{
mes:1
}
},
watch:{
//最普遍的用法,当传过来的message变化时才会去监听并执行
// newval 新值
// odlval 旧的值
// message(newval,odlval){
// this.mes = newval
// }, // 如果想让值在最初的时候就执行,需要用到一下两个属性'handler','immediate'
// 代表在wacth里声明了message这个方法之后立即先去执行handler方法,如果设置了false,那么效果和上边例子一样
message:{
handler(newval,oldval){
this.mes = newval
},
immediate:true//第一次进来就开始监视,而不是等到下次数据改变了才执行
}
}
}
</script>
监听data里面的状态发生变化
watch:{
amends(newval,odlval){ //amends是data里面的定义的状态,红色处不用加this,其他写法参考上面的
//处理逻辑 }
}
监听对象的改变
//普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听。
每个属性变化都会执行
watch: {
amends: {
handler(newName, oldName) {
// ...
},
deep: true,//设置为true可以监听对象
immediate: true
}
}
监听对象里面的属性
监听指定的属性
watch: {
'amends.name': {
handler(newName, oldName) {
// ...
},
deep: true,
immediate: true
}
}
vue watch 的简单使用的更多相关文章
- 基于vue.js的简单用户管理
功能描述:添加.修改.搜索过滤 效果图: <!DOCTYPE html> <html lang="en"> <head> <title&g ...
- day 82 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- angular4.0和angularJS、react.js、vue.js的简单比较
angularJS特性 模板功能强大丰富(数据绑定大大减少了代码量) 比较完善的前端MVC框架(只要学习这个框架,按照规定往里面填东西就可以完成前端几乎所有的的问题) 引入了Java的一些概念 ang ...
- 前台vue的使用简单小结
前台vue的使用简单小结 本项目要求:安装有node.js 6.0以及以上安装npm使用vue.js官方安装方法初始化项目npm install安装VueResurce:npm install vue ...
- axios在Vue中的简单应用(一)
1.安装axios: npm install --save axios vue-axios 2.安装qs: qs.stringify(data)可以解决data数据格式问题 npm install - ...
- day 81 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- 全栈前端入门必看 koa2+mysql+vue+vant 构建简单版移动端博客
koa2+mysql+vue+vant 构建简单版移动端博客 具体内容展示 开始正文 github地址 <br/> 觉得对你有帮助的话,可以star一下^_^必须安装:<br/> ...
- vue路由的简单实例
vue2.0 和 vue1.0 路由的语法还是有点稍微的差别,下面介绍一下vue-router 2的简单实例: <!DOCTYPE html> <html lang="en ...
- 一个vue项目的简单分享
回首用vue已经2个多月了,今年7月底根据vue社区提供的api写了一个小移动端的小dom 通过这个项目也让我更深入的了解了vue(组件之间的通讯,计算属性,数据绑定.数据驱动....),用数据驱动型 ...
- vue注册和简单使用
组件的出现就是为了解决页面布局等等一些列的问题. vue中的组件分为两种,全局组件和局部组件. 一 . 注册全局组件 通过Vue.component()创建一个全局组件之后,我们可以在一个通过 ...
随机推荐
- 第06组 Beta冲刺(4/4)
队名:福大帮 组长博客链接:https://www.cnblogs.com/mhq-mhq/p/11990575.html 作业博客 : https://edu.cnblogs.com/campus/ ...
- 【转】HTTP 协议的历史演变和设计思路
一.HTTP/0.9 HTTP 是基于 TCP/IP 协议的应用层协议.它不涉及数据包(packet)传输,主要规定了客户端和服务器之间的通信格式,默认使用80端口. 最早版本是1991年发布的0.9 ...
- Research Guide for Video Frame Interpolation with Deep Learning
Research Guide for Video Frame Interpolation with Deep Learning This blog is from: https://heartbeat ...
- java图片处理(加水印、生成缩略图)等之Thumbnailator库
Thumbnailator 是一个为Java界面更流畅的缩略图生成库.从API提供现有的图像文件和图像对象的缩略图中简化了缩略过程,两三行代码就能够从现有图片生成缩略图,且允许微调缩略图生成,同时保持 ...
- Windows上python2和python3共存
1.找到python2安装目录 2.将应用程序中的python重命名为python2,或自行定义. 3.为python2设置系统变量中的path变量.注意,记得加上英文的分号. 验证:输入python ...
- php连接mysql8报错如何解决
php版本为5.6,连接mysql8.0时报错,但是连接其他mysql8前的版本是正常的 原因可能是mysql8默认的使用密码认证方式不一样,mysql8.0默认使用caching_sha2_pass ...
- os.environ模块
os.environ是用来获取当前操作系统的一些基本信息的模块 import osos.environ.setdefault("DJANGO_SETTINGS_MODULE", & ...
- celery无法启动的问题 SyntaxError: invalid syntax
遇到了celery无法启动的问题,报错:SyntaxError: invalid syntax ,这是因为我使用的python版本为最新3.7.3 ,而async已经作为关键字而存在了 在 celer ...
- Dev c++编译报错
https://blog.csdn.net/qq_37521610/article/details/87640513
- Cookie 允许第三方cookie
这样本地调线上的接口,就可以使用线上接口生成的cookie了. 或者允许,或者增加白名单.