Vue基础03：v-model

最新推荐文章于 2024-09-05 11:22:00 发布

鲲鹏飞九万里

最新推荐文章于 2024-09-05 11:22:00 发布

阅读量99

点赞数

分类专栏：前端 Vue 文章标签： vue

本文链接：https://blog.csdn.net/hefrankeleyn/article/details/116399085

版权

前端同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

Vue

5 篇文章 0 订阅

订阅专栏

这个博客演示了Vue.js中v-model的使用，包括文本输入、复选框、单选按钮和下拉选择的双向数据绑定。通过v-model，可以轻松实现文本框值的变化、复选框的选中状态、单选按钮的选择以及下拉菜单的选项选择，并展示了如何处理输入事件。

摘要由CSDN通过智能技术生成

更多详情在github仓库中：myVueWp

<!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>
</head>
<body>

    <!-- 
        1. v-model
        2. @input
        3. 复选框
        4. 多个复选框，需要value值
        5. radio的分组： v-model， 需要提供value
        6. select
     -->
    
    <div id="app">
        <!-- v-model  是一个语法糖，等级于下面一句话 -->
        <input type="text" v-model="msg"/>
        {{msg}}
        <br/>
        <input type="text" :value="msg01" @input="change($event)"/>
        <!-- <input type="text" :value="msg01"/> -->
        {{msg01}}

        <!-- 复选框 -->
        <input type="checkbox" v-model="check"/> {{check}}
        <!-- 多个复选框, 需要有一个value值 -->
        <input type="checkbox" v-model="checks" value="aa"/>
        <input type="checkbox" v-model="checks" value="bb"/>
        <input type="checkbox" v-model="checks" value="cc"/> {{checks}}

        <br/>
        男 <input type="radio" v-model="gender" value="男"/>  女 <input type="radio" v-model="gender" value="女"/>
        <br/>
        <select v-model="select">
            <option value="111" disabled>请选择</option>
            <option v-for="v in options" :value="v.id" :key="v.id">{{v.title}}</option>
        </select> {{select}}
    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                msg: "aaa",
                msg01:"bbb",
                check: true,
                checks: [],
                gender: "男",
                select: "111",
                options: [
                    {title: "语文", id:1},
                    {title: "英语", id:2},
                    {title: "数学", id:3},
                ]
            },
            methods: {
                change: function (e) { 
                    this.msg01 = e.target.value;
                 }
            }
        });
    </script>
</body>
</html>