vue双向绑定

187 阅读1分钟

v-model

但是input发生变化的时候,数据根着变化。当数据发生变化的时候,input发生变化。

数据变化的时候input中的value属性跟着变化

<tmplate>
<input type=text :value=text/>
</tmplate>
<script>
export default{
	data(){
    	return {text:""}
    }
}
<script/>

input中的value变化的时候数据更着变化

<tmplate>
<input type=text @input="text=$event.target.value" />
</tmplate>
<script>
export default{
	data(){
    	return {text:""}
    }
}
<script/>

组合

将他们组合起来就实现了双向绑定

<input type=text @input="text=$event.target.value" :value=text/>

等价于

<input type=text v-model="text"/>

常用修饰符

.lazy

v-model.lazy="text"

只有在input失去焦点的时候改变属性值,相当于将

@input="text=$event.target.value"

改为:

@change="text=$event.target.value"

.trim

去除两边的空格

.number

转换为number类型

总结

v-model其实就是v-bind:valuev-on:input