编程 Javascript

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

vue组件watch属性实例讲解

- Author -

匿名的girl

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery实战之品牌展示列表效果

Apr 10 Javascript

疯狂Jquery第一天(Jquery学习笔记)

May 11 Javascript

Jquery中LigerUi的弹出编辑框(实现方法)

Jul 09 Javascript

jquery实现右键菜单插件

Mar 29 Javascript

JavaScript中this的9种应用场景及三种复合应用场景

Sep 12 Javascript

jQuery验证插件validate使用方法详解

Sep 13 Javascript

jQuery插件dataTables添加序号列的方法

Jul 06 Javascript

详解JavaScript中的属性和特性

Dec 08 Javascript

jQuery表单设置值的方法

Jun 30 jQuery

浅谈Angular路由复用策略

Oct 04 Javascript

基于vue写一个全局Message组件的实现

Aug 15 Javascript

js数据类型转换与流程控制操作实例分析

Dec 18 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