watch-监视数据的变化

Posted 2021-01-01 congtt

//html准备

<div id="app">

　　<label for="userName">用户名：</label>

　　<input type="text" id="userName" v-model="userName">

　　<span v-show="isError">用户名长度为 6~12 个字符</span>

</div>

// 监视的数据一定是data里的数据

data: {

　　userName: ‘‘,

　　isError: false

},

// 监视数据

watch: {

　　// 只要监视的数据变化了，那么这个函数就会被调用

　　userName(curVal, oldVal) {

　　　　// curVal 表示最新值

　　　　// oldVal 表示上一次的值

　　　　if (curVal.length < 6 || curVal.length > 12) {

　　　　　　this.isError = true

　　　　} else {

　　　　　　this.isError = false

　　　}

　　}

　}