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 相关文章推荐
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
前端jquery部分很精彩
May 03 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
JavaScript实现图片拖曳效果
Sep 08 Javascript
原生js封装添加class,删除class的实例
Nov 06 Javascript
原生javascript AJAX 三级联动的实现代码
May 04 Javascript
如何测量vue应用运行时的性能
Jun 21 Javascript
如何基于js判断浏览器版本
Feb 20 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对象类型判断
2008/08/27 PHP
一些PHP Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
javascript 对象定义方法 简单易学
2009/03/22 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
2015/10/28 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
vue实现路由监听和参数监听
2019/10/29 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
JavaScript DOM常用操作代码汇总
2020/07/03 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
python实现复制整个目录的方法
2015/05/12 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
python实现支付宝转账接口
2019/05/07 Python
python数字类型math库原理解析
2020/03/02 Python
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
文明班级建设方案
2014/05/15 职场文书
敬老模范事迹
2014/05/21 职场文书
护士工作失误检讨书
2014/09/14 职场文书
太行山上观后感
2015/06/05 职场文书
交通安全主题班会
2015/08/12 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书