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 取文本框名称代码
Dec 02 Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 Javascript
一些老手都不一定知道的JavaScript技巧
May 06 Javascript
禁用页面部分JavaScript不是全部而是部分
Sep 03 Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 Javascript
浅析Node.js非对称加密方法
Jan 29 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 Javascript
vue+element-ui+axios实现图片上传
Aug 20 Javascript
微信小程序模板消息推送的两种实现方式
Aug 27 Javascript
vue 开发之路由配置方法详解
Dec 02 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
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
PHP面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
php正则表达式使用的详细介绍
2013/04/27 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
php中cookie的使用方法
2014/03/29 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
javascript几个易错点记录
2014/11/26 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
浅析javascript的return语句
2015/12/15 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
js核心基础之闭包的应用实例分析
2019/05/11 Javascript
[48:38]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs Secret
2018/03/31 DOTA
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[03:24][TI9纪实] Dota奶爸
2019/08/22 DOTA
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
从0开始的Python学习016异常
2019/04/08 Python
django中的图片验证码功能
2019/09/18 Python
树莓派4B+opencv4+python 打开摄像头的实现方法
2019/10/18 Python
python 实现list或string按指定分段
2019/12/25 Python
python实现画图工具
2020/08/27 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
优秀毕业生自我鉴定
2014/02/11 职场文书
QQ空间主人寄语大全
2014/04/12 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏