v-model双向绑定与v-bind

最新推荐文章于 2023-09-26 14:33:22 发布

汪程序猿

最新推荐文章于 2023-09-26 14:33:22 发布

阅读量167

点赞数

分类专栏： Vue 文章标签： webview elementui vue.js

本文链接：https://blog.csdn.net/m0_61504367/article/details/123330224

版权

Vue 专栏收录该内容

28 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双向数据绑定</title>
    <script src="js/vue.js"></script>
    <style>
    .txt{
        width:300px;
    }
    </style>
</head>
<body>
    <div id="app">
        <div>{{message}}</div>
        <div><input type="text" v-model="message" class="txt"/></div>
        <div><input type="text" v-bind:value="message" class="txt"/></div>
    </div>
    <script>
    new Vue({
        el:'#app',
        data:{
            message:'敌不动，我不动，敌动，我一动不动'
        }
    })
    </script>
</body>
</html>

什么是双向绑定数据？

当数据发生变化的时候，DOM会自动更新。

当控件的值发生变化时候，数据也会自动更新。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-model指令</title>
</head>

<body>
    <div id="app">
        <div>
            <input type="txt" v-model="user.uname"> {{user.uname}}</input>
        </div>
        <div>
            <span>
                sex
            </span>
            <input type="radio" v-model="user.gender" value="1" id="man"/>
            <label for="man">man</label>
            <input type="radio" v-model="user.gender" value="2" id="woman"/>
            <label for="woman">woman</label>
        </div>

        <div>
            <select  id="" v-model="user.hobby">
            <option value="0">爱好</option>
                <option value="1">爱好aaaa</option>
                <option value="2">爱好bbbbbb</option>
                <option value="3">爱好cccccccccccc</option>
            </select>
        </div>

        <div>
            <span>简历</span>
            <textarea name="" id="" cols="30" rows="10" v-model="user.desc"></textarea>
        </div>
        <div>
            <input type="button" value="sub" v-on:click="handler"/>
        </div>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                user:{
                    uname:"zhangsan",
                    gender:"man",
                    age:18,
                    hobby:[],
                    desc:"sssssssssssssss"
                }
            },
            method:{
                handler(){
                    sonsole.dir(this.user);
                }
            }
        })
    </script>
</body>

</html>