Los vue.js instrucciones V-modelo

1. v-modelo en el que se puede usar?

<input>      //表单的一个文本框
<select>     //下拉菜单
<textarea>   //文本域
components   //vue中的组件

2. modificador de v-modelo de qué?

.lazy ----- reemplazar evento de cambio de monitor de entrada
cadena de entrada .Number en un número válido
.trim ----- entrada del filtro y espacios finales

3. Uso parte de la información v-modelo que debe saber

1. v-modelo en realidad es: una combinación de valor y @input azúcar sintáctico (: es la abreviatura v-bind, y @ v-On es una abreviatura)
2. Cuando se agrega una propiedad a los componentes de v-modelo, el valor predeterminado valorará como propiedades del componente, y luego el nombre de 'entrada' cuando el valor del evento como un componente de eventos se unen
3. La desventaja del modelo V: Al crear una casilla de verificación similar o botón de selección de componentes comunes, v-modelo no ha funcionado

4. Los espectáculos de códigos de base:

/*-----------------------html---------------------------------*/
<div id="root">
    <input type="text" v-model="str">
    <p>{{str}}</p>
</div>

/*-----------------------js---------------------------------*/
new Vue({
	el:"#root",
	data:{
		str:"这里是使用的值",
	},

})

Los resultados muestran:

Cuando se agrega el atributo v-modelo a un elemento, el valor predeterminado valorará como un atributo del elemento, entonces el evento 'entrada' como un valor de entrega en tiempo real de los eventos de activación

4. uso de modificador:

<input type="text" v-model.lazy="str">    //取代 input 监听 change 事件 
<input type="text" v-model.number="str">  //输入字符串转为有效的数字
<input type="text" v-model.trim="str">    //输入首尾空格过滤

Directamente detrás de la V-modelo más la función que corresponde por lo que se puede lograr