Vue.js表单-- v-model
v-model指令在表单控件元素上创建双向数据绑定，只能用在表单元素中（input/checkbox/select等使用
v-model的修饰符：
v-model.lazy 默认是同步更新，如果加了lazy修饰符，等光标离开之后才会更新视图
v-model.number 这个值无法被parseFloat解析的话，会原样返回，如果可以被解析，则返回解析后的结果
v-model.trim 去掉前后空格
输入框
<div id="app">
<p>input 元素：</p>
<input v-model="message" placeholder="编辑我……">
<p>消息是: {{ message }}</p>
<p>textarea 元素：</p>
<p style="white-space: pre">{{ message2 }}</p>
<textarea v-model="message2" placeholder="多行文本输入……"></textarea>
</div>
new Vue({
el: '#app',
data: {
message: 'input',
message2: 'textarea'
}
})
复选框
复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组
<div id="app">
<p>单个复选框：</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<p>多个复选框：</p>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
checked : false,
checkedNames: []
}
})
</script>
单选按钮
单选按钮的双向数据绑定
<body>
<div id="app">
<input type="radio" id="jack" value="Jack" v-model="picked">
<label for="jack">苹果</label>
<br>
<input type="radio" id="google" value="Google" v-model="picked">
<label for="google">桃子</label>
<br>
<span>你喜欢吃: {{ picked }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
picked : 'Jack'
}
})
</script>
</body>
select 列表
<body>
<div id="app">
<select v-model="selected" name="fruit">
<option value="">选择一个网站</option>
<option value="www.baidu.com">Runoob</option>
<option value="www.google.com">Google</option>
</select>
<div id="output">
选择的网站是: {{selected}}
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
selected: ''
}
})
</script>
</body>