7.vue3监听属性

通过 watch 来响应数据的变化。

<template>
  <div>
    <input type="text" v-model="msg" />
    <h1>{{msg}}</h1>
  </div>
</template>

<script>
export default{
  name:'App',
  data(){
    return{
      msg:"helloworld"
    }
  },
  watch:{
    // 监听值的变化
    msg:function(newValue,oldValue){
      console.log('newValue',newValue)
      console.log('oldValue',oldValue)
      if (newValue.length<10){
        alert("输入的值太少了")
      }

    }
  },
}
</script>

效果：

<template>
  <div>
    千米 : <input type="text" v-model="kilometers" /> <br />
    米 : <input type="text" v-model="meters" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      kilometers: 0,
      meters: 0
    };
  },
  watch: {
    // 监听值的变化
    kilometers: function (val) {
      this.kilometers =val
      this.meters=this.kilometers * 1000
    },
    meters: function (val) {
      this.kilometers = val/1000
      this.meters=val
    },
  },
}

</script>