vue的数据双向绑定v-model

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

zhongbai-

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

阅读量95

点赞数

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

本文链接：https://blog.youkuaiyun.com/sjgllllll/article/details/112635923

版权

vue 专栏收录该内容

24 篇文章

订阅专栏

本文通过实例展示了Vue.js的使用，包括引入Vue.js库，创建Vue实例，以及在视图层模板中使用v-model进行双向数据绑定。在输入框、多选按钮和下拉列表案例中，详细阐述了v-model如何实现实时更新数据，并在页面上展示动态变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!--第一步引入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    /*第二步创建Vue并绑定对象*/
    var vm=new Vue({
        el:'#app',
        data:{
            message:''
        }
    });
var vm1=new Vue({
    el:"#app1",
    data: {
        who:''
    }
});
 var vm2=new Vue({
     el:'#app2',
     data:{
         select:''
     }
 });
</script>

<!--第三步赋值 view层 模板-->

<!--第三步赋值 view层 模板-->
<!--双向绑定就是双向赋值-->

<!--输入框案例-->
<div id="app">
    <input type="text" v-model="message"><!--v-model实现数据动态改变-->
    输入的文本为：{{message}}
</div>

<!--多选按钮案例-->
<div id="app1">
    <input type="radio" name="sex" value="男" v-model="who">男
    <input type="radio" name="sex" value="女" v-model="who">女
    <p>
        选中了谁：{{who}}
    </p>
</div>

<!--下拉列表案例-->
<div id="app2">
    <select v-model="select">
        <option value="" disabled>--请选择--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <p>选择的是：{{select}}</p>
</div>

在这里插入图片描述