4. v-model双向绑定

最新推荐文章于 2024-09-10 10:21:38 发布

heaven_dad

最新推荐文章于 2024-09-10 10:21:38 发布

阅读量115

点赞数

分类专栏： Vue 基础学习文章标签： vue java v-model

本文链接：https://blog.csdn.net/heaven_dad/article/details/107674727

版权

Vue 基础学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

4. v-model双向绑定

代码演示1

双向绑定就是一起发生变化

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <div id="app">
        <input type="text" v-bind:value="user.name"></input>
        <!-- 双向绑定 就是自己变化会带着相关信息都发生变化 -->
        <input type="text" v-model="user.name"></input>

        <p>{{user.name}}</p>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                //创建user对象并给属性赋值
                user: {
                    name: 'xuan' 
                }
            }    
        })
        
    </script>
</body>

代码演示2

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

<div id="app">
    文本输入框：<input type="text" v-model="message">{{message}}
</div>
<script>
    var vm=new Vue({
        el: "#app",
        data:{
            message: "sdbfuw"
        }
    }); 
</script>

在这里插入图片描述

代码演示3

<div id="app">
    下拉框：
    <select  v-model="selected" >
        <option value="" disabled>---请选择---</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <div>value:{{selected}}</div>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            selected: ""
        }
    });
</script>

在这里插入图片描述

heaven_dad

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4. v-model双向绑定

4. v-model双向绑定代码演示1双向绑定就是一起发生变化<body> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <div id="app"> <input type="text" v-bind:value="user.name"></input> &lt
复制链接

扫一扫

专栏目录