watch侦听属性

<template>
  <div class="hello">
    <h1>侦听属性</h1>
    //3．使用双向数据绑定修改num变量
    <input type="text" v-model="num" />
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
     //1．声明num变量
      num: 10
    };
  },
  watch: {
    //2．要侦听num数据，侦听属性的方法名就是num()
    //侦听属性的方法不能随意命名
    num() {
      console.log("num数值发生改变");
    }
  }
};
</script>

<template>
  <div class="hello">
    <input type="text" v-model="user" />
    <input type="text" v-model="password" />
    <input type="button" value="单击" :class="{active: isactive}" />
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      user: "",
      password: "",
      isactive: false // 1. 定义 isactive 变量，控制按钮样式的显示和隐藏
    };
  },
  watch: {
    user() { // 3. 监听 user 的改变
      if (this.user == "" || this.password == "") {
        this.isactive = false;
      } else {
        this.isactive = true;
      }
    },
    password() { // 4. 监听 password 的改变
      if (this.user == "" || this.password == "") {
        this.isactive = false;
      } else {
        this.isactive = true;
      }
    }
  }
};
</script>

<style scoped>
.active {
  background: red;
}
</style>