Cómo implementar watch in vue para detectar automáticamente cambios en los datos
Este artículo presenta el método para que los relojes Vue detecten automáticamente cambios en los datos y los presenten en tiempo real. Me gustaría compartirlos con usted de la siguiente manera:
Primero, confirme que. El reloj es un objeto y debe usarse como objeto.
Los objetos tienen claves y valores.
Clave: Es lo que desea monitorear, como $route, esto es para monitorear los cambios de ruta. O una variable en los datos.
El valor puede ser una función: esta es la función que debe ejecutarse cuando cambia el objeto que desea monitorear. Esta función tiene dos parámetros formales, el primero es el valor actual y el segundo es el. valor después del cambio.
El valor también puede ser el nombre de una función, pero el nombre de la función debe estar entre comillas simples.
El tercer escenario es genial.
El valor es un objeto que contiene opciones: hay tres opciones incluidas.
Primer manejador: su valor es una función de devolución de llamada. Es decir, la función que se debe ejecutar cuando se escucha un cambio.
El segundo es profundidad: su valor es verdadero o falso; se utiliza para confirmar si se realiza un monitoreo profundo. (Generalmente, cuando el monitoreo no puede monitorear los cambios en los valores de los atributos del objeto, puede monitorear los cambios en los valores de la matriz).
La tercera es inmediata: su valor es verdadero o falso; una función que confirma si se ejecuta el controlador con el valor inicial actual.
Mira el ejemplo
La última vez hablamos de que $set o vm.set se pueden usar para cambiar dinámicamente los datos representados en la página (agregar, eliminar) para recalcular renderizado.
A veces es necesario cambiar dinámicamente algunos datos o valores y luego realizar operaciones de procesamiento adicionales (por ejemplo, mostrar, ocultar, agregar, eliminar), mostrar, ocultar, agregar, eliminar), como se muestra en la siguiente ejemplo de código:
El siguiente es un ejemplo de una pestaña:
Crear una nueva página de componente de pestaña en el proyecto vue
lt;.templategt;
{{index}}
lt;pgt;
lt;p @click="showFun(0)"gt; Tab1lt;/pgt;
lt;p @click="showFun(1)"gt.Tab2lt;/pgt;
lt;p @click="showFun(2)"gt;/pgt;
lt;/pgt;
lt;pgt;
lt;p v-if="index == 0"gt.cont1lt;/pgt;
lt;p v-if="index == 1"gt;cont1lt;/pgt;
lt;p v-if="index == 2"gt;cont1lt ;/pgt;
lt;/pgt;
lt;/pgt;
lt;/templategt;
lt;scriptgt ;
exportar valor predeterminado {
datos(){
devolver {
índice: 0 // índice
}
},
ver: { // Detección en tiempo real
index(idx){ // Monitoreo en tiempo real de cambios de índice
console.log (idx) // Aquí puedes hacer otras cosas basadas en el valor de idx
}
},
métodos : {
showFun(idx){
retorno {
métodos: {
retorno {
retorno {
return {
showFun(idx){
this.index = idx
}
}
}
}
lt;/scriptgt;watch le permite personalizar los oyentes, lo cual es más útil cuando necesita realizar operaciones asincrónicas o generales cuando los datos cambios.
A continuación te proporcionaré otro ejemplo de búsqueda:
lt;templategt;
lt;input v-model="value" /gt; Cuadro de búsqueda
lt;/templategt;
lt;Scriptgt.
exportar datos predeterminados {
(){
devolver {
valor: '' // valor
}
},
ver: {
value(val){ // escucha los cambios de datos en tiempo real
this.wat_fun(val)
}
},
métodos: {
wat_fun(val){ // Aquí puede llamar a la interfaz de la API de búsqueda
console.log(val)
}
}
}
}
lt;/scriptgt; Lo anterior es el contenido que he compilado para ti, espero que así sea. Te será útil Ayuda.
Artículos relacionados:
Cómo implementar la función de carga y recorte de imágenes en cropper js a través de vue
Cómo usar el método cropperjs en vue (tutorial detallado)
Implemente una serie de funciones de recorte, compresión y carga de imágenes de vista previa local en vue.js
Explicación detallada del código fuente de FastClick (tutorial detallado)
Cómo implementar usando vue y element-ui Paginación de contenido de tabla