-
只要被监听的数据发生了变化,会自动触发 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) })