vue之数据的双向绑定

最新推荐文章于 2024-04-12 15:32:24 发布

Finaina

最新推荐文章于 2024-04-12 15:32:24 发布

阅读量265

点赞数

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

本文链接：https://blog.csdn.net/csdnlff/article/details/124464839

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文深入解析 Vue 框架中的 v-model 指令，介绍了其在表单元素上的作用，通过监听 input 事件和 value 值实现双向数据绑定。示例代码展示了 v-model 在不同表单元素（如 input、select、checkbox、radio 和 textarea）上的用法，帮助理解 v-model 的底层原理和实际应用。

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

vue指令：v-model

作用于：表单元素上（提供视图 | 页面上数据的修改空间）

底层原理：

input事件 + value值

    <div id="app">
        <input type="text" :value="msg" v-on:input="handle">
        <!-- <input type="text" :value="msg" v-on:input="msg=$event.target.value"> -->
        <div>{{ msg }}</div>
    </div>
    <script src="../vue_v2.6.14.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: "hello"
            },
            methods: {
                handle(e) {
                    this.msg = e.target.value;
                }
            }
        })

常见表单元素的双向绑定：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
</head>

<body>
    <div id="app">
        <!-- input  -->
        <input type="text" v-model="msg">
        {{ msg }}
        <hr>

        <!-- select  -->
        <select name="" id="" v-model="selectMsg">
            <option value="qd">前端</option>
            <option value="hd">后端</option>
            <option value="ui">UI</option>
        </select>
        {{ selectMsg }}
        <hr>

        <!-- 复选框 checkbox -->
        <input type="checkbox" name="flower" value="carnation" v-model="checkMsg">康乃馨
        <input type="checkbox" name="flower" value="rose" v-model="checkMsg">玫瑰
        <input type="checkbox" name="flower" value="lily" v-model="checkMsg">百合
        {{ checkMsg }}
        <hr>

        <!-- 单选框 radio -->
        <input type="radio" name="男" value="0" v-model="radioMsg">男
        <input type="radio" name="女" value="1" v-model="radioMsg">女
        {{ radioMsg }}
        <hr>

        <!-- 文本域  -->
        <textarea name="" id="" cols="30" rows="10" v-model="text"></textarea>
        <div v-html="text"></div>
        <hr>

    </div>
    <script src="../vue_v2.6.14.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: "lifen", // 与input框的value绑定
                selectMsg: "ui", // 与option的vale绑定
                // checkMsg: "", // 值为空字符串时，默认为false-未选中的状态
                checkMsg: [], // 
                // radioMsg: [], // 
                radioMsg: '', // 
                text: '' // 
            },
            methods: {

            }
        })
    </script>
</body>

</html>