限制
<input><select><textarea>- components
修饰符
-
.lazy- 取代input监听change事件 -
.number- 输入字符串转为数字 -
.trim- 输入首尾空格过滤
用法示例
1、input文本
<div id="app">
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
</div>
<script>
var app =new Vue({
el:'#app',
data:{
message:'this is a message!'
}
})
</script>
2、textarea多行文本
<div id="app">
<span>Multiline message is:</span>
<p style="white-space: pre-wrap">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
</div>
<script>
var app =new Vue({
el:'#app',
data:{
message:'this is a message!'
}
})
</script>
3、单个复选框
<div id="app">
<input type="checkbox" id="checkbox" v-model="isChecked">
<label for="checkbox">{{isChecked?'已勾选':'未勾选' }}</label>
</div>
<script>
var app =new Vue({
el:'#app',
data:{
isChecked:true
}
})
</script>
4、多个复选框
<div id="app">
<input type="checkbox" id="Tom" value="Tom" v-model="boys">
<label for="Tom">Tom</label>
<input type="checkbox" id="Jack" value="Jack" v-model="boys">
<label for="Jack">Jack</label>
<input type="checkbox" id="Mickey" value="Mickey" v-model="boys">
<label for="Mickey">Mickey</label>
<br>
<span>Checked boys: {{ boys }}</span>
</div>
<script>
var app =new Vue({
el:'#app',
data:{
boys:[]
}
})
</script>
5、单选框
<div id="app">
<input type="radio" id="One" value="One" v-model="chooses">
<label for="One">One</label>
<input type="radio" id="Two" value="Two" v-model="chooses">
<label for="Two">Two</label>
<input type="radio" id="Three" value="Three" v-model="chooses">
<label for="Three">Three</label>
<br>
<span>The choose is: {{chooses}}</span>
</div>
<script>
var app =new Vue({
el:'#app',
data:{
chooses:''
}
})
</script>
6、单选下拉框列表
<div id="app">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>Tom</option>
<option>Jack</option>
<option>Mickey</option>
</select>
<span>Your selected is: {{ selected }}</span>
</div>
<script>
var app =new Vue({
el:'#app',
data:{
selected:''
}
})
17 </script>
如果 v-model 表达初始的值不匹配任何的选项，<select> 元素就会以”未选中”的状态渲染。在 iOS 中，这会使用户无法选择第一个选项，因为这样的情况下，iOS 不会引发 change 事件。因此，像以上提供 disabled 选项是建议的做法。
7、多选下拉框列表
<div id="app">
<select v-model="selected" multiple>
<option disabled value="">请选择</option>
<option>Tom</option>
<option>Jack</option>
<option>Mickey</option>
</select>
<span>Your selected is: {{ selected }}</span>
</div>
<script>
var app =new Vue({
el:'#app',
data:{
selected:[]
}
})
</script>
8、动态生成的单选下拉框列表
<div id="app">
<select v-model="selected">
<option disabled value="">请选择</option>
<option v-for="option in options" :value="option">{{option}}</option>
</select>
<span>Your selected is: {{selected}}</span>
</div>
<script>
var app =new Vue({
el:'#app',
data:{
selected:'',
options: [
'Tom',
'Jack',
'Mickey'
]
}
})
</script>
9、绑定value
对于单选按钮，勾选框及选择列表选项， v-model 绑定的 value 通常是静态字符串（对于勾选框是逻辑值）：
<!-- 当选中时，`picked` 为字符串 "a" --> <input type="radio" v-model="picked" value="a"> <!-- `toggle` 为 true 或 false --> <input type="checkbox" v-model="toggle"> <!-- 当选中时，`selected` 为字符串 "abc" --> <select v-model="selected"> <option value="abc">ABC</option> </select>
- 复选框
<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b" > // 当选中时 vm.toggle === vm.a // 当没有选中时 vm.toggle === vm.b
- 单选按钮
<input type="radio" v-model="pick" v-bind:value="a"> // 当选中时 vm.pick === vm.a
- 选择列表设置
<select v-model="selected">
<!-- 内联对象字面量 -->
<option v-bind:value="{ number: 123 }">123</option>
</select>
// 当选中时
typeof vm.selected // -> 'object'
vm.selected.number // -> 123
-
.lazy:在默认情况下，v-model在input事件中同步输入框的值与数据 (除了 上述 IME 部分)，但你可以添加一个修饰符lazy，从而转变为在change事件中同步：
<!-- 在 "change" 而不是 "input" 事件中更新 --> <input v-model.lazy="msg" >
- .number：如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符
number给v-model来处理输入值：
<input v-model.number="age" type="number">
这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。
- 如果要自动过滤用户输入的首尾空格，可以添加
trim修饰符到v-model上过滤输入：
<input v-model.trim="msg">