vue组件watch属性实例讲解
2017-11-07 08:48
861 查看
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
- vue进行图片的预加载watch用法实例讲解
- vue-自定义组件传值的实例讲解
- vue父组件中获取子组件中的数据(实例讲解)
- vue组件初学_弹射小球(实例讲解)
- vue之父子组件间通信实例讲解(props、$ref、$emit)
- Vue组件中prop属性使用说明实例代码详解
- vue生命周期、computed属性和 method方法、watch 属性区别
- float属性与clear属性综合讲解与实例
- Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
- vue兄弟组件传递数据的实例
- vue.js基础-属性与方法和实例生命周期
- vue.js计算属性用法(computed)技巧,依赖其他vue实例的数据
- 【React Native开发】React Native控件之Image组件讲解与美团首页顶部效果实例(10)
- JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例
- vue实例属性(vm.$els)
- 用webpack2.0构建vue2.0单文件组件超级详细精简实例
- vue-lazyload图片延迟加载插件的实例讲解
- 图解:实例对比讲解display、float、clear、overflow、visibility属性
- ASP.NET2.0自定义控件组件开发 第六章 深入讲解控件的属性