Vue.js（13）- Watch监听数据变化

watch 监听的特点：监听到某个数据的变化后，侧重于做某件事情；

• 只要被监听的数据发生了变化，会自动触发 watch 中指定的处理函数；

app.vue

<template>
  <div>
    <p>姓名：<input type="text" v-model="username"></p>
    <p>密码：<input type="text" v-model="password" ref="pwdDOM"></p>
    <button>登录</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  // 进行数据的监听
  watch: {
    password: function(newVal, oldVal) {
      if (newVal.length < 8) {
        // 设置红色文本
        this.$refs.pwdDOM.style.color = 'red'
      } else {
        // 设置蓝色文本
        this.$refs.pwdDOM.style.color = 'blue'
      }
    }
  }
}
</script>

index.js

import Vue from 'vue'

import app from './app.vue'
const vm = new Vue({
  el: '#app',
  render: c => c(app)
})