表单输入绑定 — Vue.js (vuejs.org)
官方的文档已经很详细了，现在主要记录一下基本常用用法。
1. 表单输入绑定的基本用法
在Vue中我们可以使用v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
注意：v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
1.使用文本
显示输入的文本，点击按钮可以设置里面的文本并显示出来。
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
<p><button @click="message= 'akane'">send message to akane</button></p>
2.多行文本
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
3.使用复选框
单个复选框，绑定到布尔值：
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<label>
<input type="checkbox" v-model="x">
<span>x:{{ x }}</span>
</label>
多个复选框，绑定到同一个数组：
<div id="app">
爱好是：{{ x }}
<label>
<input name="want" type="checkbox" v-model="x" :value="1">
<span>游泳</span>
</label>
<label>
<input name="want" type="checkbox" v-model="x" :value="2">
<span>唱歌</span>
</label>
<label>
<input name="want" type="checkbox" v-model="x" :value="3">
<span>跳舞</span>
</label>
</div>
- 加上 name 之后，如果是相同的 name ，就会被分为同一组来进行三选一。
- 使用
value只能取到字符串，比如："1"、"2"、"3":，:value意思是绑定了value，可以取到内部值，比如1、2、3。
4.使用下拉框
单选时
<template>
<div id="app">
你想要： {{ x }}
<select v-model="x">
<option value="">-</option>
<option v-for="item in array" :value="item.value" :key="item.value">
{{ item.text }}
</option>
</select>
</div>
</template>
export default {
name: 'App',
data() {
return {
array: [
{text:"游泳", value:1},
{text:"唱歌", value:2},
{text:"跳舞", value:3},
]
}
},
}
</script>
多选时（配合ctrl和alt键选择），绑定到一个数组：
<div id="example-6">
<select v-model="selected" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</div>
new Vue({
el: '#example-6',
data: {
selected: []
}
})
值绑定问题
对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)：
<!-- 当选中时，`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>
但是有时我们可能想把值绑定到 Vue 实例的一个动态 property 上，这时可以用 v-bind 实现，并且这个 property 的值可以不是字符串。
5.form表单创建登录
<template>
<div id="app">
登录
<form @submit.prevent="onSubmit">
<label>
<span>用户名</span>
<input type="text" v-model="user.username">
</label>
<label>
<span>密码</span>
<input type="password" v-model="user.password">
</label>
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
user: {
username: "",
password: ""
}
}
},
methods:{
onSubmit(){
console.log(this.user)
}
},
}
</script>
使用form标签回车会自动刷新，如果不想这样，想储存数据可以阻止form的submit事件
- v-model 默认监听
- input 事件，键盘、鼠标、其他任何输入设备的输入
- change 事件，只在 input 失去焦点时触发
2.修饰符
- .lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步：
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">
通过上面表单的例子，可以在。user.name 前面的 v-model 前加 .lazy，这样可以在用户点击别处时才储存数据。
<template>
<div id="app">
登录
<form>
<label>
<span>用户名</span>
<input type="text" v-model.lazy="user.username">
</label>
<label>
<span>密码</span>
<input type="password" v-model="user.password">
</label>
<button>登录</button>
</form>
</div>
</template>
- .number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
<input v-model.number="age" type="number">
这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。
一般使用的话，可以先先取字符串，然后再进行 parseInt()处理，取出数字。
- .trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
<input v-model.trim="msg">
3. 自定义组件的 v-model
3.1 原理
实际上 v-model 是 v-bind 和 v-on 的语法糖。
v-model 可以绑定一个变量，当变量变化时会更新页面，用户改变页面数据时，变量也会变化。
v-model 默认 @input 输入的是元素。
<input type="text" :value="user.username" @input="user.username=$event.target.value">
<!-- 等价与 -->
<input type="text" v-model="user.username">
5.自定义组件的 v-model
一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突：
Vue.component('base-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean
},
template: `
<input
type="checkbox"
v-bind:checked="checked"
v-on:change="$emit('change', $event.target.checked)"
/>
`
})
现在在这个组件上使用 v-model 的时候：这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的 property 将会被更新。
注意：此时仍然需要在 组件的 props选项声明 checked 这个prop。
