您的位置: 首页  >  文章  >  Vue.js实战之系统学习第六节

Vue.js实战之系统学习第六节

分类: 文章 • 2024-12-07 22:29:40

想看上一节的请点击

Vue.js实战之系统学习第五节

接下来让我们学习第六节，表单与v-model

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue 示例</title>
    </head>
    <body>
        <div id="app">
			<input type= "text" v-model="message"  placeholder = "请输入...">
			<p>输入的内容是：{{message}}</p>
        </div>
        <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
        <script>
            var app = new Vue({
                el:'#app',
                data:{
                  message:''
                }
            })
        </script>
    </body>
</html>

在输入框输入的同时，{{message}}也会实时的将内容渲染到视图中

Vue.js实战之系统学习第六节

注意：如果是用中文输入法输入中文，一般在没有选定词组前，也就是拼音阶段，Vue是不会更新数据的，当敲下汉字才会触发更新，如果希望总是实时更新，可以用@input来代替v-model替代v-model，事实上，v-model也是一个特殊的语法糖，只不过它会在不同的表单上智能处理。

单选按钮在单独使用时，不需要v-model，直接使用v-bind绑定一个布尔类型的值，为真时选中，为否时不选。

Vue.js实战之系统学习第六节

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue 示例</title>
    </head>
    <body>
        <div id="app">
			<input type= "radio" v-model="picked"  value="html" id="html">
			<label for="html">HTML</label>
			<br>
			<input type= "radio" v-model="picked"  value="js" id="js">
			<label for="html">JavaScript</label>
			<br>
			<input type= "radio" v-model="picked"  value="css" id="css">
			<label for="html">CSS</label>
			<br>
			<p>选择的项是：{{picked}}</p>
        </div>
        <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
        <script>
            var app = new Vue({
                el:'#app',
                data:{
                  picked:'js'
                }
            })
        </script>
    </body>
</html>

数据picked的值与单选按钮的value值一致时，就会选中该项，所以当前状态下选中的是第二项JavaScript。

Vue.js实战之系统学习第六节

复选框

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue 示例</title>
    </head>
    <body>
        <div id="app">
			<input type= "checkbox" v-model="checked"  id="checked">
			<label for="checked">选择状态：{{checked}}</label>
        </div>
        <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
        <script>
            var app = new Vue({
                el:'#app',
                data:{
                  checked:false
                }
            })
        </script>
    </body>
</html>

在勾选时，数据checked的值变为了true，label中渲染的内容也会更新。

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue 示例</title>
    </head>
    <body>
        <div id="app">
			<input type= "checkbox" v-model="checked"  value="html" id="html">
			<label for="html">HTML</label>
			<br>
			<input type= "checkbox" v-model="checked"  value="js" id="js">
			<label for="html">JavaScript</label>
			<br>
			<input type= "checkbox" v-model="checked"  value="css" id="css">
			<label for="html">CSS</label>
			<br>
			<p>输入的内容是：{{checked}}</p>
        </div>
        <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
        <script>
            var app = new Vue({
                el:'#app',
                data:{
                  checked:['html','css']
                }
            })
        </script>
    </body>
</html>

Vue.js实战之系统学习第六节

选择列表：

选择列表就是下拉选择器，也是常见的表单空间，同样也分为单选和多选两种方式。

<select v-model = "selected">
    <option>html</option>
    <option value = "js">JavaScript</option>
    <option>css</option>
</select>

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

给<select>添加属性multiple就可以多选了，此时v-model绑定的是一个数组，与复选框用法类似。

<select v-model = "selected" multiple>
    <option>html</option>
    <option value = "js">JavaScript</option>
    <option>css</option>
</select>

data{
    selected:['html','js']
}

在业务中，<option>经常用v-for动态输出，value和text也是用v-bind来动态输出的，例如：

<select v-model = "selected">
    <option v-for="option in options":value="options.value">{{ option.text }}</option>
</select>

data{
    selected:'html',
    options:[
        {
            text:'HTML',
            value:'html'
        },
        {
            text:'JavaScript',
            value:'js'
        }
    ]
}

虽然用选择列表<select>控件可以简单完成下拉选择的需求，但是在实际业务中反而不常用，因为它的样式依赖平台和浏览器，无法统一，也不太美观。

绑定值

上面我们介绍了单选按钮、复选框和选择列表在单独使用或单选的模式下，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 src="https://unpkg.com/vue/dist/vue.min.js"></script>
        <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 src="https://unpkg.com/vue/dist/vue.min.js"></script>
        <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 src="https://unpkg.com/vue/dist/vue.min.js"></script>
        <script>
            var app = new Vue({
                el:'#app',
                data:{
                  selected:''
                }
            })
        </script>

当选中时，app.selected是一个Object，所以app.selected.number === 123。

修饰符

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

.lazy:

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

        <div id="app">
			<input type="text" v-model.lazy="message">
			{{message}}
        </div>
        <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
        <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>{{typeof message}}</p>
        </div>
        <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
        <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 src="https://unpkg.com/vue/dist/vue.min.js"></script>
        <script>
            var app = new Vue({
                el:'#app',
                data:{
                  message:''
                }
            })
        </script>

从Vue.js 2.x开始，v-model还可以用于自定义组件，满足定制化的需求，在第七章会详细介绍，本章就到这了

想继续学习下一节的请点击：

Vue.js实战之系统学习第七节

 

 

 

 

 

 

 

 

相关推荐