vue组件watch属性实例讲解


Posted in Javascript onNovember 07, 2017

本文实例为大家分享了vue组件watch属性的具体代码,供大家参考,具体内容如下

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>wacth属性</title>
 <script src="js/vue.js"></script>
 </head>
 <body>
 <div id="container">
  <p>{{msg}}</p>
  <my-component></my-component>
 </div>
 <script>
  Vue.component("my-component",{
   data:function(){
    return {
     myInput:"",
     myPhone:123456
    }
   },
   template:`
    <div>
     <input type="text" v-model="myInput"/>
     <input type="text" v-model="myPhone"/>
     <span>{{myInput}}</span>
    </div>
   `,
   watch:{
    myInput:function(){
    //当数据发生变化、执行的操作
     console.log("数据改变");
    },
    myPhone:function(){
     console.log(this.myPhone);
    }
   }
  })
  new Vue({
   el:"#container",
   data:{
    msg:"Hello VueJs"
   }
  })
 </script>
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
强制设为首页代码
Jun 19 Javascript
一些有关检查数据的JS代码
Sep 07 Javascript
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
Javascript Object.extend
May 18 Javascript
弹出最简单的模式化遮罩层的js代码
Dec 04 Javascript
javascript继承的六大模式小结
Apr 13 Javascript
轻量级javascript 框架Backbone使用指南
Jul 24 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
解决axios post 后端无法接收数据的问题
Oct 29 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 #Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 #Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 #Javascript
浅谈mint-ui 填坑之路
Nov 06 #Javascript
基于vue实现分页效果
Nov 06 #Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
Nov 06 #Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 #Javascript
You might like
PHP游戏编程25个脚本代码
2011/02/08 PHP
PHP中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
用javascript连接access数据库的方法
2006/11/17 Javascript
Jquery 1.42 checkbox 全选和反选代码
2010/03/27 Javascript
js中设置元素class的三种方法小结
2011/08/28 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
js实现div的切换特效上一个下一个
2014/02/11 Javascript
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
jQuery on方法传递参数示例
2014/12/09 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
2018/11/25 Javascript
js getBoundingClientRect使用方法详解
2019/07/17 Javascript
vue循环数组改变点击文字的颜色
2019/10/14 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
pycharm 使用心得(五)断点调试
2014/06/06 Python
Python编程中NotImplementedError的使用方法
2018/04/21 Python
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
党的群众路线教育学习材料
2014/05/12 职场文书