Nota: ¡Asegúrese de definir el atributo de inicialización en el nodo de datos para el valor de v-model en el formulario!
Los oyentes de observación permiten a los desarrolladores monitorear los cambios de datos y realizar operaciones específicas en los cambios de datos.
Todos los oyentes deben definirse en el nodo de observación.
Caso: cada vez que se ingresa un valor en el cuadro de entrada, el oyente puede escucharlo
<template>
<div class="news">
<p>侦听器</p>
<input type="text" v-model="listens">
</div>
</template>
<script>
export default {
name: "hello",
data() {
return {
listens:"", // 侦听器
};
},
methods: {
},
// 侦听器
watch:{
listens(newVal,oldVal){
console.log('新输入的值'+newVal+',上一次输入的值'+oldVal);
}
}
};
</script>
Si desea monitorear el objeto, debe usar la opción profunda para establecerlo en verdadero
Realmente no entiendo por qué solo hay un controlador en la búsqueda global.
<template>
<div class="news">
<p>侦听器</p>
<input type="text" v-model="info.username">
</div>
</template>
<script>
export default {
name: "hello",
data() {
return {
info: //用户的信息对象
{
username:'admin',
}
};
},
methods: {
},
// 侦听器
watch:{
// listens(newVal,oldVal){
// console.log('新输入的值'+newVal+',上一次输入的值'+oldVal);
// }
info:{
handler(newVal){
console.log(newVal);
},
deep:true //开启深度监听 只要对象中任何一个属性变化 都会触发'对象的侦听器'
}
}
};
</script>