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 相关文章推荐
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
Jun 04 Javascript
js实现图片漂浮效果的方法
Mar 02 Javascript
原生js和jquery实现图片轮播特效
Apr 23 Javascript
元素绑定click点击事件方法
Jun 08 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
Jul 28 Javascript
canvas绘制爱心的几种方法总结(推荐)
Oct 31 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
layDate日期控件使用方法详解
Nov 15 Javascript
vue+eslint+vscode配置教程
Aug 09 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中UNIX时间戳和日期间的转换与计算实例
2014/11/19 PHP
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
jQuery 可以拖动的div实现代码 脚本之家修正版
2009/06/26 Javascript
JS异常处理的一个想法(sofish)
2013/03/14 Javascript
JS实现选项卡实例详解
2015/11/17 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
利用Angularjs中模块ui-route管理状态的方法
2016/12/27 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
js注册时输入合法性验证方法
2017/10/21 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
mock.js模拟数据实现前后端分离
2019/07/24 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
js实现录音上传功能
2019/11/22 Javascript
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python 正则表达式实现计算器功能
2017/04/29 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
Python----数据预处理代码实例
2019/03/20 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
使用卷积神经网络(CNN)做人脸识别的示例代码
2020/03/27 Python
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
什么是封装
2013/03/26 面试题
销售文员的岗位职责
2013/11/20 职场文书
物业保安员岗位职责制度
2014/01/30 职场文书
2014年幼儿园植树节活动方案
2014/03/02 职场文书
环保建议书
2014/03/12 职场文书
法律进机关实施方案
2014/03/12 职场文书
高校教师岗位职责
2014/03/18 职场文书
《迟到》教学反思
2016/02/24 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python