欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue.js 学习笔记 第6章 表单与v-model

程序员文章站 2023-04-05 20:35:53
表单类控件承载了一个网页数据的录入与交互,本章将介绍如何使用指令v-model完成表单的数据双向绑定。6.1 基本用法表单控件在实际业务较为常见,比如单选、多选、下拉选择、输入框等,用它们可以完成数据的录入、校验、提交等。Vue.js提供了v-model指令,用于在表单类元素上双向绑定数据,例如在输... ......

 

本篇目录:

 

表单类控件承载了一个网页数据的录入与交互,本章将介绍如何使用指令v-model完成表单的数据双向绑定。

6.1 基本用法

表单控件在实际业务较为常见,比如单选、多选、下拉选择、输入框等,用它们可以完成数据的录入、校验、提交等。
vue.js提供了v-model指令,用于在表单类元素上双向绑定数据,例如在输入框上使用时,输入的内容会实时映射到绑定的数据上。
例如下面的例子:

 1 <div id="app">
 2     <input type="text" v-model="message" placeholder="请输入...">
 3     <p>输入的内容是:{{message}}</p>
 4 </div>
 5 
 6 <script>
 7     var app = new vue({
 8         el: "#app",
 9         data: {
10             message: ""
11         }
12     });
13 </script>

 

在输入框输入的同时,{{message}}也会实时将内容渲染在视图中。
如图6-1所示:
Vue.js 学习笔记 第6章 表单与v-model

对于文本域<textarea>也是同样的用法:

 1 <div id="app">
 2     <textarea v-model="text" placeholder="请输入..."></textarea>
 3     <p>输入的内容是:</p>
 4     <p style="white-space: pre;">{{text}}</p>
 5 </div>
 6 
 7 <script>
 8     var app = new vue({
 9         el: "#app",
10         data: {
11             text: ""
12         }
13     });
14 </script>

 

提示:
提示v-model后,表单控件显示的值只依赖所绑定的数据,不再关心初始化时的value属性,对于在<textarea></textarea>之间插入的值,也不会生效。
使用v-model时,如果是用中文输入法输入中文,一般在没有选定词组前,也就是在拼音阶段,vue是不会更新数据的,当敲下汉字时才会触发鞥新。
如果希望总是实时更新,可以用@input来替代v-model
事实上,v-model也是一个特殊的语法糖,只不过它会在不同的表单上智能处理。
例如下面的示例:

 1 <div id="app">
 2     <input type="text" @input="handleinput" placeholder="请输入...">
 3     <p>输入的内容是:{{message}}</p>
 4 </div>
 5 
 6 <script>
 7     var app = new vue({
 8         el: "#app",
 9         data: {
10             message: ""
11         },
12         methods: {
13             handleinput: function(event) {
14                 this.message = event.target.value;
15             }
16         }
17     });
18 </script>

 

来看看更多的表单控件。

单选按钮:

单选按钮在单独使用时,不需要v-model,直接使用v-bind绑定一个布尔类型的值,为true时选中,为false时不选。
例如:

 1 <div id="app">
 2     <input type="radio" :checked="picked">
 3     <label>单选按钮</label>
 4 </div>
 5 
 6 <script>
 7     var app = new vue({
 8         el: "#app",
 9         data: {
10             picked: true
11         }
12     });
13 </script>

 

如果是组合使用来实现互斥选择的效果,就需要v-model配合value来使用:

 1 <div id="app">
 2     <input type="radio" v-model="picked" value="html" id="html">
 3     <label for="html">html</label>
 4     
 5     <input type="radio" v-model="picked" value="js" id="js">
 6     <label for="js">javascript</label>
 7     
 8     <input type="radio" v-model="picked" value="css" id="css">
 9     <label for="css">css</label>
10     
11     <p>您选择的是:{{picked}}</p>
12 </div>
13 
14 <script>
15     var app = new vue({
16         el: "#app",
17         data: {
18             picked: "js"
19         }
20     });
21 </script>

 

数据picked的值与表单按钮的value值一致时,就会选中该项,所以当前状态下选中的是第二项。
如图6-2所示:
Vue.js 学习笔记 第6章 表单与v-model

复选框:

复选框也分单独使用和组合使用,不过用法稍与单选不同。
复选框单独使用时,也是用v-model来绑定一个布尔值。
例如:

 1 <div id="app">
 2     <input type="checkbox" v-model="checked" id="checked">
 3     <label for="checked">选择状态:{{checked}}</label>
 4 </div>
 5 
 6 <script>
 7     var app = new vue({
 8         el: "#app",
 9         data: {
10             checked: false
11         }
12     });
13 </script>

 

在勾选时,数据checked的值改为了true<label>中渲染的内容也会更新。

组合使用时,也是v-modelvalue一起,多个勾选框都绑定到同一个数组类型的数据,value的值在数据当中,就会选中这一项。
这一过程也是双向的,在勾选时,value的值也会自动push到这个数组中。
实例代码如下:

 1 <div id="app">
 2     <input type="checkbox" v-model="checked" value="html" id="html">
 3     <label for="html">html</label>
 4     <br>
 5     <input type="checkbox" v-model="checked" value="js" id="js">
 6     <label for="js">javascript</label>
 7     <br>
 8     <input type="checkbox" v-model="checked" value="css" id="css">
 9     <label for="css">css</label>
10     <br>
11     <p>你选择的是:{{checked}}</p>
12 </div>
13 
14 <script>
15     var app = new vue({
16         el: "#app",
17         data: {
18             checked: ["html", "css"]
19         }
20     });
21 </script>

 

当前状态下的结果如图6-3所示:
Vue.js 学习笔记 第6章 表单与v-model

选择列表:

选择列表就是下拉选择器,也是常见的表单控件,同样也分为单选和多选两种方式。
先看一下单选的示例代码:

 1 <div id="app">
 2     <select v-model="selected">
 3         <option>html</option>
 4         <option value="js">javascript</option>
 5         <option>css</option>
 6     </select>
 7     <p>你选择的是:{{selected}}</p>
 8 </div>
 9 
10 <script>
11     var app = new vue({
12         el: "#app",
13         data: {
14             selected: "html"
15         }
16     });
17 </script>

 

<option>是备选项,如果含有value属性,v-model就会优先匹配value的值;
如果没有,就会直接匹配<option>text
比如选中第二项时,selected的值为js,而不是javascript

<select>添加属性multiple就可以多选了,此时v-model绑定的是一个数组,与复选框用法类似。
实例代码如下:

 1 <div id="app">
 2     <select v-model="selected" multiple>
 3         <option>html</option>
 4         <option value="js">javascript</option>
 5         <option>css</option>
 6     </select>
 7     <p>你选择的是:{{selected}}</p>
 8 </div>
 9 
10 <script>
11     var app = new vue({
12         el: "#app",
13         data: {
14             selected: ["html", "js"]
15         }
16     });
17 </script>

 

在业务中,<option>经常用v-for动态输出,valuetext也是用v-bind来动态输出的。
例如:

<div id="app">
    <select v-model="selected">
        <option v-for="item in options" :value="item.value">{{item.text}}</option>
    </select>
    <p>你选择的是:{{selected}}</p>
</div>

<script>
    var app = new vue({
        el: "#app",
        data: {
            options: [
                {text:"html", value:"html"},
                {text:"javascript", value:"js"},
                {text:"css", value:"css"},
            ],
            selected: "html"
        }
    });
</script>

 

虽然用选择列表<select>控件可以很简单地完成下拉选择的需求,但是在实际业务中反而不常用,因为它的样式依赖平台和浏览器,无法统一,也不太美观,功能也受限,,比如不支持搜索,所以常见的解决方案是用<div>moi一个类似的控件。
当阅读完第7章组件的内容后,可以尝试编写一个下拉选择器的通用组件。

6.2 绑定值

上一节介绍的单选按钮、复选框和选择列表在单独使用或单选的模式下,v-model绑定的值是一个静态字符串或布尔值。
但在业务中,有时需要绑定一个动态的数据,这时可以用v-bind来实现。

单选按钮:

 1 <div id="app">
 2     <input type="radio" v-model="picked" :value="value">
 3     <label>单选按钮</label>
 4     <p>{{picked}}</p>
 5     <p>{{value}}</p>
 6 </div>
 7 
 8 <script>
 9     var app = new vue({
10         el: "#app",
11         data: {
12             picked: false,
13             value: 123
14         }
15     });
16 </script>

 

在选中时,app.picked===app.value,值都是123

复选框:

 1 <div id="app">
 2     <input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
 3     <label>复选框</label>
 4     <p>{{toggle}}</p>
 5     <p>{{value1}}</p>
 6     <p>{{value2}}</p>
 7 </div>
 8 
 9 <script>
10     var app = new vue({
11         el: "#app",
12         data: {
13             toggle: false,
14             value1: "a",
15             value2: "b"
16         }
17     });
18 </script>

 

勾选时,app.toggle===app.value1
未勾选时,app.toggle===app.value2

选择列表:

 1 <div id="app">
 2     <select v-model="selected">
 3         <option :value="{number:123}">123</option>
 4     </select>
 5     {{selected.number}}
 6 </div>
 7 
 8 <script>
 9     var app = new vue({
10         el: "#app",
11         data: {
12             selected: ""
13         }
14     });
15 </script>

 

当选中时,app.selected是一个object,所以app.selected.number===123

6.3 修饰符

与事件的修饰符类似,v-model也有修饰符,用于控制数据同步的时机。

.lazy:

在输入框中,v-model默认是在input事件中同步输入框的数据(除了提示中介绍的中文输入法情况外)。
使用修饰符.lazy会转变为在change事件中同步,示例代码如下:

 1 <div id="app">
 2     <input type="text" v-model.lazy="message">
 3     <p>{{message}}</p>
 4 </div>
 5 
 6 <script>
 7     var app = new vue({
 8         el: "#app",
 9         data: {
10             message: ""
11         }
12     });
13 </script>

 

这是,message并不是实时改变的,而是在失焦或按回车时才更新。

.number:

使用修饰符.number可以将输入转换为number类型,否则虽然你输入的是数字,但它的类型其实是string。
比如在数字输入框时会比较有用,示例代码如下:

 1 <div id="app">
 2     <input type="number" v-model.number="message">
 3     <p>{{typeof message}}</p>
 4 </div>
 5 
 6 <script>
 7     var app = new vue({
 8         el: "#app",
 9         data: {
10             message: 123
11         }
12     });
13 </script>

 

.trim:

修饰符.trim可以自动过滤输入的首尾空格,示例代码如下:

 1 <div id="app">
 2     <input type="text" v-model.trim="message">
 3     <p>{{message}}</p>
 4 </div>
 5 
 6 <script>
 7     var app = new vue({
 8         el: "#app",
 9         data: {
10             message: ""
11         }
12     });
13 </script>

 

从vue.js 2.x开始,v-model还可以用于自定义组件,满足定制化的需求,在第7章会详细介绍。