Vue.js入门 0x3 表单与v-model

最新推荐文章于 2025-09-12 10:23:37 发布

原创最新推荐文章于 2025-09-12 10:23:37 发布 · 298 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Vue表单控件 #Vue表单绑定值 #Vue单选框 #Vue复选框 #Vue选择列表

前端基础同时被 2 个专栏收录

167 篇文章

订阅专栏

JavaScript

152 篇文章

订阅专栏

本文详细介绍了Vue.js中v-model指令在表单控件上的应用，包括输入框、单选、多选、下拉选择等场景，以及如何通过v-model实现数据的实时双向绑定。

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

基本用法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello Vue</title>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="message" placeholder="输入...">
            <p>输入的内容是：{{message}}</p>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    message:''
                }
            })
        </script>
    </body>
</html>

使用v-model后，表单控件显示的值只依赖所绑定的数据，不再关心初始化时的value属性，对于在<textarea></textarea>之间插入的值，也不会生效。

<div id="app">
    <textarea v-model="text" placeholder="输入..."></textarea>
    <p>输入的内容是：</p>
    <p style="white-space:pre">{{text}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            text:''
        }
    })
</script>

使用v-model时，如果是用中文输入法输入中文，一般在没有选定词组前，也就是在拼音阶段，Vue是不会更新数据的，当敲下汉字时才会触发更新。如果希望总是实时更新，可以用@input来代替v-model。

<div id="app">
    <input type="text" @input="handleInput" placeholder="输入...">
    <p>输入的内容是：{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            message:''
        },
        methods:{
            handleInput:function(e){
                this.message = e.target.value;
            }
        }
    })
</script>

单选按钮

<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="js">JavaScript</label>
    <br>
    <input type="radio" v-model="picked" value="css" id="css">
    <label for="css">CSS</label>
    <br>
    <p>选择的项是:{{picked}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            picked:'js'
        }
    })
</script>

复选框

<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="js">JavaScript</label>
    <br>
    <input type="checkbox" v-model="checked" value="css" id="css">
    <label for="css">CSS</label>
    <br>
    <p>选择的项是:{{checked}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            checked:['html','css']
        }
    })
</script>

选择列表

<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 src="https://cdn.jsdelivr.net/npm/vue"></script>
<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 来实现。

单选按钮

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

<div id="app">
    <input type="radio" v-model="picked" :value="value">
    <label>单选按钮</lable>
    <p>{{picked}}</p>
    <p>{{value}}</p>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            picked:false,
            value:123
        }
    })
</script>

复选框

勾选时，app.toggle===app.valuel：未勾选时，app.toggle===app.value2。

div id="app">
    <input 
        type="checkbox" 
        v-model="toggle" 
        :true-value="value1"
        :false-value="value2">
    <label>复选框</lable>
    <p>{{toggle}}</p>
    <p>{{value1}}</p>
    <p>{{value1}}</p>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            toggle:false,
            value1:'a',
            value2:'b'
        }
    })
</script>

选择列表

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

<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>