网络编程
位置：首页>> 网络编程>> JavaScript>> vue组件watch属性实例讲解

vue组件watch属性实例讲解

作者：匿名的girl　　发布时间：2024-05-09 15:19:22　

标签：vue,watch

本文实例为大家分享了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>

来源：http://www.cnblogs.com/wangruifang/p/7768190.html

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com