Vue(六) 表单与 v-model
学习使用 v-model 指令完成表单数据双向绑定
基本用法
表单控件在实际业务较为常见，比如单选，多选、下拉选择、输入框等，用他们可以完成数据的录入、校验、提交等。Vue.js 提供了 v-model 指令，用于在表单元素上双向绑定数据，例如：
<div id="app">
<input type="text" v-model="message" placeholder="输入。。。"></input>
<p>输入的内容是：{{ message }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
}
})
</script>
在输入框输入的同时，{{ message }} 也会实时将内容渲染在视图中。
使用 v-model 时，如果是用中文输入法输入中文，在拼音阶段，Vue 是不会更新数据的，当敲下汉字时才会触发更新。如果想总是实时更新，可以用 @input 来替代 v-model，例如：
<div id="app">
<input type="text" @input="handleInput" placeholder="输入。。。"></input>
<p>输入的内容是：{{ message }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
},
methods: {
handleInput: function (e) {
this.message = e.target.value;
}
}
})
</script>
来看看更多的表单控件。
单选按钮：
单选按钮在单独使用时，不需要 v-model，直接使用 v-bind 绑定一个布尔类型的值，为真时选中，为假时不选，例如：
<div id="app">
<input type="radio" :check="picked">
<label>单选按钮</label>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
picked: true
}
})
</script>
如果是组合使用来实现互斥选择的效果，就需要 v-model 配个value 来使用：
<div id="app">
<input type="radio" v-model="picked" value="html" id="html">
<label for="html">HTML</label>
<input type="radio" v-model="picked" value="js" id="js">
<label for="js">JavaScript</label>
<input type="radio" v-model="picked" value="css" id="css">
<label for="css">CSS</label>
<p>选择的项是：{{ picked }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
picked: 'js'
}
})
</script>
数据 picked 的值与单选按钮的 value 值一致时，就会选中该项。
复选框：
复选框也分单独使用和组合使用，不过用法稍与单选不同。复选框单独使用时，也是用 v-model 来绑定一个布尔值，例如：
<div id="app">
<input type="checkbox" v-model="checked" id="checked">
<p>选择状态：{{ checked }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
checked: false
}
})
</script>
在勾选时，数据 checked 的值变为true，lable 中渲染的内容也会更新。
组合使用时，也是 v-model 与 value 一起，多个勾选框都绑定到同一个数组类型的数据，value 的值在数组中，就会选中这一项。这一过程也是双向的，value 的值也会自动 push 到这个数组中，例如：
<div id="app">
<input type="checkbox" v-model="checked" value="html" id="html">
<label for="html">HTML</label>
<input type="checkbox" v-model="checked" value="js" id="js">
<label for="js">JavaScript</label>
<input type="checkbox" v-model="checked" value="css" id="css">
<label for="css">CSS</label>
<p>选择的项是：{{ checked }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
checked: ['html', 'js']
}
})
</script>
选择列表：
选择列表就是下拉选择器，同样分单选和多选两种方式。先看单选的示例：
<div id="app">
<select v-model="selected">
<option>html</option>
<option value="js">JavaScript</option>
<option>CSS</option>
</select>
<p>选择的项是：{{ selected }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
selected: 'html'
}
})
</script>
<option> 是备选项，如果含有 value 属性，v-model 就会优先匹配 value 的值；如果没有，就会直接匹配 <option> 的 text，比如选中第二项，selected 的值为 js，而不是 JavaScript。
给 <selected> 添加multiple 就可以多选了，此时 v-model 绑定的是一个数组，与复选框类似，例如：
<div id="app">
<select v-model="selected" multiple>
<option>html</option>
<option value="js">JavaScript</option>
<option>CSS</option>
</select>
<p>选择的项是：{{ selected }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
selected: ['html','js']
}
})
</script>
在业务中，<option> 经常用 v-for 动态输出，value 和 text 也是用 v-bind 来动态输出的，例如：
div id="app">
<select v-model="selected">
<option v-for="option in options" :value="option.value">
{{ option.text }}
</option>
</select>
<p>选择的项是：{{ selected }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
selected: 'html',
options: [
{
text: 'HTML',
value: 'html'
},
{
text: 'JavaScript',
value: 'Js'
},
{
text: 'CSS',
value: 'css'
}
]
}
})
</script>
绑定值
前面介绍的单选按钮，复选框和选择列表，v-model 绑定的值是一个静态字符串或布尔值，但在业务中，有时需要绑定一个动态的数据，这时可以用 v-bind 来实现。
单选按钮：
<div id="app">
<input type="radio" v-model="picked" :value="value">
<label>单选按钮</label>
<p>{{ picked }}</p>
<p>{{ value }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
picked: false,
value: 123
}
})
</script>
在选中时，app.picked === app.value，值都是 123。
复选框：
<div id="app">
<input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
<label>复选框</label>
<p>{{ toggle }}</p>
<p>{{ value1 }}</p>
<p>{{ value2 }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
toggle: false,
value1: 'a',
value2: 'b'
}
})
</script>
勾选时，app.toggle === app.value1; 未勾选时，app.toggle === app.value2。
选择列表：
<div id="app">
<select v-model="selected">
<option :value="{number: 123}">123</option>
</select>
{{ selected.number}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
selected: ''
}
})
</script>
当选中时，app.selected 是一个Object，所以 app.selected.number === 123。
修饰符
与事件的修饰符类似，v-model 也有修饰符，用于控制数据同步的时机。
.lazy:
使用修饰符 .lazy 会转变为在 change 事件中同步，例如：
<div id="app">
<input type="text" v-model.lazy="message">
<p>{{ message }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
}
})
</script>
这时，message 并不是实时改变的，而是在失去焦点或按回车时才更新。
.number
使用 .number 可以将输入转换为 Number 类型，虽然你输入的是数字，但它的类型其实是 String，在数字输入框比较有用，实例代码如下：
<div id="app">
<input type="number" v-model.number="message">
<p>{{ message }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 123
},
})
</script>
.trim
修饰符 .trim 可以自动过滤输入的首尾空格，例如
<div id="app">
<input type="text" v-model.trim="message">
<p>{{ message }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
},
})
</script>
最新文章
- SQL必知必会1-13 读书笔记
- MySQL到MsSQL的迁移工具——SSMA
- 李洪强-C语言9-C语言的数据,变量和常量
- 暴力求解——最大乘积 Maximum Product,UVa 11059
- JAVA为什么会空指针异常
- 【POJ2136】Vertical Histogram（简单模拟）
- UIImage与UIColor互转
- 12个CSS高级技巧汇总
- zoj 1453 Stripies
- MVC应用程序请求密码的功能(二)
- BZOJ-1012-[JSOI2008]最大数maxnumber（线段树）
- 四：Java使用google的thumbnailator工具对图片压缩水印等做处理
- 【微服务】之四：轻松搞定SpringCloud微服务-负载均衡Ribbon
- Go_Hello word
- Css之导航栏下拉菜单
- Vs2017 typescript 开发小问题
- sql基本
- Kettle从excel导入数据到sql server
- VSCode中怎么改变文件夹的图标
- python类的__slots__属性、__del__属性、上下文(__enter__和__exit__)、