Vue的 v-model 指令

最新推荐文章于 2025-05-28 11:06:29 发布

耶瞳

最新推荐文章于 2025-05-28 11:06:29 发布

阅读量171

点赞数 6

CC 4.0 BY-SA版权

分类专栏： js 文章标签： vue

本文链接：https://blog.youkuaiyun.com/tongkongyu/article/details/117093855

js 专栏收录该内容

50 篇文章

订阅专栏

本文详细介绍了Vue.js中的v-model特性，包括其基本使用、与radio、checkbox、select的结合以及修饰符的应用。通过实例展示了v-model如何实现双向数据绑定，并在不同场景下的用法，帮助读者深入理解v-model的工作原理和实际操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 
        v-model
        1.双向绑定，表单元素的值变化则绑定的数据也会变化 
        2.会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。
        3.应该通过 JavaScript 在组件的 data 选项中声明初始值。
    -->

    <!-- v-model 的基本使用 -->
    <div id="app1">
        <input type="text" v-model="msg" @keydown="seeMsg()">
        {{msg}}
    </div>
    <script>
        const app1 = new Vue({
            el: '#app1',
            data: {
                msg: 'hello Vue.js!'
            },
            methods: {
                seeMsg: function() {
                    console.log(this.msg);
                }
            }
        })
    </script><br><hr><br>

    <!-- v-model 与 radio 结合,此处无需name -->
    <div id="app2">
        <label for="male">
            <input type="radio" value="男" id="male" v-model="sex">男
        </label>
        <label for="female">
            <input type="radio" value="女" id="female" v-model="sex">女
        </label>
        <p>您的性别是：{{sex}}</p>
    </div>
    <script>
        const app2 = new Vue({
            el: '#app2',
            data: {
                sex: '男'
            }
        })
    </script><br><hr><br>

    <!-- v-model 与 checkbox 结合 -->
    <div id="app3">
        <input type="checkbox" id="agree" v-model="isAgree">同意《xxxx协议》
        <br>
        <button :disabled="!isAgree">下一步</button>
        <br><br>

        <input type="checkbox" value="篮球" v-model="hobbies">篮球
        <input type="checkbox" value="足球" v-model="hobbies">足球
        <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
        <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
        <p>您的爱好是:{{hobbies}}</p>
    </div>
    <script>
        const app3 = new Vue({
            el: '#app3',
            data: {
                isAgree: false,
                hobbies: []
            }
        })
    </script><br><hr><br>

    <!-- v-model 与 select 结合 -->
    <div id="app4">
        <!-- 选择一个 -->
        <select name="" id="" v-model="fruit">
            <option value="苹果">苹果</option>
            <option value="香蕉">香蕉</option>
            <option value="榴莲">榴莲</option>
            <option value="葡萄">葡萄</option>
        </select>
        <p>您选择的是：{{fruit}}</p>

        <!-- 选择多个 -->
        <select name="" id="" multiple v-model="fruits">
            <option value="苹果">苹果</option>
            <option value="香蕉">香蕉</option>
            <option value="榴莲">榴莲</option>
            <option value="葡萄">葡萄</option>
        </select>
        <p>您选择的是：{{fruits}}</p>

        <!-- 值绑定: input的值可以动态绑定 -->
        <label v-for="item in people" :for="item">
            <input type="checkbox" :value="item" :id="item" v-model="peopleChoosed">{{item}}
        </label>
        <p>您勾选的人：{{peopleChoosed}}</p>
    </div>
    <script>
        const app4 = new Vue({
            el: '#app4',
            data: {
                fruit: "苹果",
                fruits: [],
                people: ['虚哥',"济钢","鸡哥","大鹏"],
                peopleChoosed: []
            }
        })
    </script><br><hr><br>

    <!-- v-model的修饰符 -->
    <div id="app5">
        <!-- lazy: 失去焦点后才时时绑定-->
        <input type="text" v-model.lazy="msg">
        <p>{{msg}}</p>

        <!-- 
            number
            一般情况的话 v-model 给变量赋值默认为字符串类型
            使用 number 修饰符后赋值为数字类型
        -->
        <input type="text" v-model.number="age">
        <p>{{age}} - {{typeof age}}</p>

        <!-- trim: 去除空格 -->
        <input type="text" v-model.trim="name">
        <p>您输入的名字：{{name}}</p>
    </div>
    <script>
        const app5 = new Vue({
            el: "#app5",
            data: {
                msg: 'hello Vue.js!',
                age: '',
                name: ''
            }
        })
    </script>
</body>
</html>