Vue的 v-model 指令

本文详细介绍了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>

更多相关内容大家可以前往我的个人博客浏览:eyes++的个人空间

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值