Vue 表单处理
用法
vue 的表单处理主要使用v-model指令，且仅仅限制于在<input>、<select>、<textarea>等HTML表单元素中使用。v-model可以根据HTML控件的类型来自动选取正确的方法来进行更新。
需要值得注意的是v-model指令会忽略所有的表单value、checked、selected等属性的初始值，所以需在js内的data选项中声明初始值，其中元素所对应的属性对应为：
| ID |
DA |
| text & textarea |
使用value 属性和input 事件 |
| checkbox & radio |
使用 checked 属性 和 change 事件 |
| select |
将以value 作为属性并和 change 事件 |
1
2
3
4
5
6
7
8
9
10
11
12
| <div id="app">
<input v-model="message" placeholder="输入">
<p>当前输入的是： {{message}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 0
}
})
</script>
|
textarea
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <style>
.br {
white-space: pre-line;
}
</style>
<div id="app">
<textarea v-model="message" placeholder="输入"></textarea>
<p class="br">当前输入的是： {{message}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
}
})
</script>
|
在上述的演示当中，<p>标签是不会根据<textarea>标签中并不会进行换行，所以我们需要使用style的white-space属性。
checkbox
1
2
3
4
5
6
7
8
9
10
11
12
| <div id="app">
<input type="checkbox" id="message" v-model="message">
<label for="message">{{message}}</label>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: false
}
})
</script>
|
复选框绑定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <div id="app">
<h2>Vue</h2>
<input type="checkbox" id="vue" value="vue" v-model="message"><label>vue</label>
<input type="checkbox" id="vue" value="vue" v-model="message"><label>vue</label>
<h2>Laravel</h2>
<input type="checkbox" id="laravel" value="laravel" v-model="message"><label>laravel</label>
<h2>Less</h2>
<input type="checkbox" id="less" value="less" v-model="message"><label>less</label>
<hr/>
<br>
<label>共选择了 {{message}}</label>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: []
}
})
</script>
|
radio
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <div id="app">
<input type="radio" id="vue" value="Vue" v-model="message">
<label for="vue">Vue</label>
<input type="radio" id="laravel" value="Laravel" v-model="message">
<label for="vue">Laravel</label>
<input type="radio" id="ejs" value="Ejs" v-model="message">
<label for="vue">Ejs</label>
<hr/>
<br>
<label>选择了 {{message}}</label>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
}
})
</script>
|
当单选一个radio类型的时候，将会根据其radio类型中所设置的value进行显示。
选择框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <div id="app">
<select v-model="message">
<option disabled value="">类型</option>
<option value="Vue 被选择了">Vue</option>
<option value="Laravel 被选择了">Laravel</option>
</select>
<p>{{message}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
}
})
</script>
|
在上述的code当中，我们主要通过使用value来设置option被选择时的属性，除此之外我们还可以直接在 vue 中更加生动的进行绑定：
value 绑定
修饰符
在 vue中，不仅仅为前面几章提供了修饰符，自然而然的也为表单处理所加入了一些较为常用的修饰符，如.lazy、.number、.trim，他们的详细用法是：
| ID |
DA |
| .lazy |
当输入完成时在同步信息 |
| .number |
将输入的值自动转换为 number类型 |
| .trim |
自动过滤首尾空白 |
.lazy
vue 所提供的.lazy修饰符的主要作用就是，当输入的时候并不会更新当前输入的内容，只有当结束输入的时候才会进行更新或同步：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <style>
.br {
white-space: pre-line;
}
</style>
<div id="app">
<textarea v-model.lazy="message" placeholder="输入"></textarea>
<p class="br">当前输入的是： {{message}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
}
})
</script>
|
.number
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| ```vue
<style>
.br {
white-space: pre-line;
}
</style>
<div id="app">
<input type="number" v-model.number="message" placeholder="输入"></input>
<p class="br">当前输入的是： {{message}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
}
})
</script>
|
.trim
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| ```vue
<style>
.br {
white-space: pre-line;
}
</style>
<div id="app">
<textarea v-model.trim="message" placeholder="输入"></textarea>
<p class="br">当前输入的是： {{message}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
}
})
</script>
|
