外观
表单输入绑定
你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件来更新数据,并在某种极端场景下进行一些特殊处理。
<input v-model="message" placeholder="edit me" /> <!--该语法的意思是此input与变量message绑定了,它们的值始终一致-->
<p>Message is: {{ message }}</p>data() {
return {
message:""
}
}如下面用一个简单的滑块改变数字显示:
<template>
<input type="range" v-model="number">
<p>{{ number }}</p>
</template>
<script>
export default {
data() {
return {
number: 0
}
}
}
</script>修饰符
.lazy
在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。我们可以添加 lazy 修饰符,从而转为在 change 事件之后进行同步。
<input v-model.lazy="message" /> <!--这种情况下只有每次此input失去焦点后message才会与其同步-->
<p>Message is: {{ message }}</p>data() {
return {
message:""
}
}.trim
如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符。
<input v-model.trim="message" /> <!--去除首尾空格-->data() {
return {
message:""
}
}