Vue内置指令——v-model（双向数据绑定）

v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型自动选取正确的方法来更新元素。负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。注意：v-model 会忽略所有表单元素的 value、checked、selected属性的初始值而总是将 Vue 实例的数据作为数据来源。应该通过 JavaScript 在组件的 data 选项中声明初始值。运行结果：修饰符...

沐小侠

3189人浏览 · 2022-06-29 10:34:19

沐小侠 · 2022-06-29 10:34:19 发布

v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型自动选取正确的方法来更新元素。负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
注意：v-model 会忽略所有表单元素的 value、checked、selected属性的初始值而总是将 Vue 实例的数据作为数据来源。应该通过 JavaScript 在组件的 data 选项中声明初始值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单输入绑定</title>
    <style>
        #app {margin: 0 auto;width: 880px;height: 610px;}
        #app h2 {text-align: center;}
        .left {width: 400px;float: left}
        .form {margin-left: 30px;}
        .right {width: 400px;float: right;border: 1px solid #000;}
        .info {margin-left: 30px;line-height: 1.2em;}
    </style>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>填写个人信息</h2>
        <div class="left">
            <div class="form">
                <form>
                    <!-- 文本框 -->
                    <!-- trim修饰符可以过滤内容左右两边的空格。 -->
                    <p>姓名: <input type="text" name="user" v-model.trim="user"></p>
                    <p>
                        <!-- 单选按钮：单选按钮中被选择的单选按钮，通过v-model=”sex”自动绑定。 -->
                        性别:
                        <input type="radio" value="男" v-model="sex"><label>男</label>
                        <input type="radio" value="女" v-model="sex" checked><label>女</label>
                    </p>
                    <p>
                        <!-- 复选框：
                        两种情况：单个勾选框和多个勾选框。
                        单个勾选框：
                            v-model即为布尔值。
                            此时input的value并不影响v-model的值。
                        多个复选框：
                            当是多个复选框，因为可以选中多个，所以对应的data中的属性是一个数组。
                            当选中某一个时，就会将input的value添加到数组中。
                        -->
                        爱好:
                        <input type="checkbox" value="篮球" v-model="checkedNames">
                        <label>篮球</label>
                        <input type="checkbox" value="足球" v-model="checkedNames">
                        <label>足球</label>
                        <input type="checkbox" value="羽毛球" v-model="checkedNames">
                        <label>羽毛球</label>
                        <input type="checkbox" value="跑步" v-model="checkedNames">
                        <label>跑步</label>
                    </p>
                    <p>
                        <!--如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。
                                选择列表多选时，绑定到一个数组上。-->
                        <label>地址:</label>
                        <select name="city" v-model="address">
                            <option value="">请选择城市</option>
                            <option value="北京">北京</option>
                            <option value="上海">上海</option>
                            <option value="广州">广州</option>
                            <option value="深圳">深圳</option>
                            <option value="杭州">杭州</option>
                        </select>
                    </p>
                    <p>
                        <!-- 文本域 -->
                        个人简介:<br />
                        <textarea v-model="profile" cols="50" rows="6">填写信息</textarea>
                        <!-- 在文本区域插值 (<textarea>{{ profile }}</textarea>) 并不会生效，应用 v-model 来代替。 -->
                    </p>
                    <p>
                        <!-- 但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。 -->
                        <input type="checkbox" v-model="toggle" v-bind:true-value="yes" v-bind:false-value="no" />
                        
                    </p>
                    <div>
                        <input type="submit" value="提交">
                        <input type="reset" value="重置">
                    </div>
                </form>
            </div>
        </div>
        <div class="right">
            <div class="info">
                <p>姓名:{{user}}</p>
                <p>性别:{{sex}}</p>
                <p>爱好:<span v-if="checkedNames.length!=0">{{checkedNames}}</span></p>
                <p>地址:{{address}}</p>
                <p>个人简介:{{profile}}</p>
                <p>{{toggle}}</p>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                user: '',
                sex: '男',
                checkedNames: [],
                address: '',
                profile: '',
                toggle:'',
                yes:'yes',
                no:'no'
            }
        })
    </script>
</body>
</html>

运行结果：
在这里插入图片描述
修饰符

.lazy: 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。可以给 v-model添加 lazy 修饰符，从而转变为使用 change 事件进行同步。
.number：自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符
.trim：自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

沐小侠

@weixin_41092938

已为社区贡献2条内容