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:value和v-on:input