Vue使用watch监听指定数据的变化

最新推荐文章于 2024-06-04 09:24:28 发布

北海之灵

最新推荐文章于 2024-06-04 09:24:28 发布

阅读量9.4k

点赞数 3

分类专栏： Vue 文章标签： Vue watch

本文链接：https://blog.csdn.net/xukongjing1/article/details/82899765

版权

Vue 专栏收录该内容

35 篇文章 19 订阅

订阅专栏

在Vue中，可以使用watch属性来监听data中某个属性值的变化。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
<body>
  <div id='app'>
    <input type="text" v-model="firstname" >+
    <input type="text" v-model="lastname" >=
    <input type="text" v-model="fullname">
  </div>
</body>
<script src="../lib/vue.js"></script>
<script>
  var vm = new Vue({
    el:'#app',
    data:{
      firstname:'',
      lastname:'',
      fullname:''
    },
    methods:{
     
    },
    //使用这个属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的function 处理函数
    watch:{
      firstname:function(newVal,oldVal){
        //console.log('监视到了firstname的变化');
        //this.fullname = this.firstname + "-" + this.lastname
        console.log(newVal +"---"+oldVal)
        this.fullname = newVal + "-" + this.lastname
      },
      'lastname':function(newVal){
        this.fullname = this.firstname + "-" + newVal
      }
    }
  })
</script>
</html>

北海之灵

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
Vue使用watch监听指定数据的变化

在Vue中，可以使用watch属性来监听data中某个属性值的变化。&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;/head&gt;&lt;body&gt; &lt;div id='app
复制链接

扫一扫

专栏目录