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仿Excel表格编辑功能的实现代码
May 01 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
js中把JSON字符串转换成JSON对象最好的方法
Mar 21 Javascript
JavaScript设计模式之外观模式实例
Oct 10 Javascript
jQuery中closest()函数用法实例
Jan 07 Javascript
js验证手机号、密码、短信验证码代码工具类
Jun 24 Javascript
Node.js使用Express创建Web项目详细教程
Mar 31 Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
微信小程序实现多行文字滚动
Nov 18 Javascript
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
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学习笔记(一) 简单了解PHP
2014/08/04 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
侧栏跟随滚动的简单实现代码
2013/03/18 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
2013/09/25 Javascript
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
2017/07/17 jQuery
基于js文件加载优化(详解)
2018/01/03 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
2018/03/25 jQuery
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
详解Webpack4多页应用打包方案
2020/07/16 Javascript
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
python中尾递归用法实例详解
2015/04/28 Python
Django框架下在URLconf中指定视图缓存的方法
2015/07/23 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
详解用python写一个抽奖程序
2019/05/10 Python
python模块常用用法实例详解
2019/10/17 Python
python 通过邮件控制实现远程控制电脑操作
2020/03/16 Python
python dict乱码如何解决
2020/06/07 Python
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
意大利体育用品网上商城:Nencini Sport
2016/08/18 全球购物
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
电子商务助理求职自荐信
2014/04/10 职场文书
运动会演讲稿
2014/05/07 职场文书
大学生工作求职信
2014/06/23 职场文书
体育运动会广播稿
2014/10/05 职场文书
小浪底导游词
2015/02/12 职场文书
民主评议党员个人总结
2015/02/13 职场文书
解读Vue组件注册方式
2021/05/15 Vue.js
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL