Vue基础（2）双向绑定
2024-10-21 19:47:28
双向数据绑定
- 通过修改标签，例：切换radio、checkbox......都会对绑定的数据有影响
- 通过事件触发方法，修改data中数据，反向作用于radio、checkbox......
1、v-model
（1）通过绑定input实现双向绑定
</head>
<body>
<div id="app">
<!-- div、input标签同时绑定data中input_value -->
<div>{{input_value}}</div>
<div>{{input_value}}</div>
<input type="text" v-model="input_value"> </div> <script src="../js/vue.js"></script> <script>
new Vue({
el:'#app',
data:{
input_value:'default'
}
}) </script>
</body>
打开前端页面默认显示：
输入框重新输入后显示：
我们可以看出，当输入框的值变动时，同时绑定了“input_value”的div、input标签一起在同时变动，所以是当input框输入时，产生了联动
（2）通过button点击实现双向绑定
<body>
<div id="app">
<!-- div、input标签同时绑定data中input_value -->
<div>{{input_value}}</div>
<input type="text" v-model="input_value">
<!-- 绑定change -->
<input type="button" value="change" @click="change"> </div> <script src="../js/vue.js"></script> <script>
new Vue({
el:'#app',
data:{
input_value:'default'
},
methods:{
change:function () {
this.input_value = 'change value'
}
}
}) </script>
</body>
点击【change】前：
点击【change】后：
（3）通过radio进行双向绑定
<body>
<div id="app">
<div>{{sex}}</div>
// 绑定sex,默认是1，会默认勾选男
<input type="radio" value="1" name="sex" v-model="sex">男
<input type="radio" value="2" name="sex" v-model="sex">女
</div>
<script src="../js/vue.js"></script> <script>
new Vue({
el:'#app',
data:{
input_value:'default',
sex:1
},
methods:{
change:function () {
this.input_value = 'change value'
}
}
}) </script>
</body>
默认显示：
点击【女】时显示：
（4）通过checkbox实现双向数据绑定
- value配置成 [ ] 用于存储选择的多个数据
<body>
<div id="app">
<div>{{movies}}</div>
//勾选后，会取值到【input标签】的value的值
<input type="checkbox" value="钢铁侠" v-model="movies">钢铁侠
<input type="checkbox" value="复仇者联盟" v-model="movies">复仇者联盟
</div> <script src="../js/vue.js"></script> <script>
new Vue({
el:'#app',
data:{
movies:[]
movies:['钢铁侠']
},
methods:{
}
})
</script>
</body>
默认展示：
勾选后显示：
data中的movies:['钢铁侠']时，默认显示：
我们可以看出，勾选后，input中的value值是同步到了list中
<body>
<div id="app">
<div>{{movie}}</div>
<select v-model="movie">
<option value="钢铁侠">钢铁侠</option>
<option value="复仇者联盟">复仇者联盟</option>
</select>
</div> <script src="../js/vue.js"></script> <script>
new Vue({
el:'#app',
data:{
movie:'',
// movie:'钢铁侠'
},
methods:{
}
})
</script>
</body>
（5）通过下拉框option实现双向绑定
- value 配置成 str
<body>
<div id="app">
<div>{{movie}}</div>
<select v-model="movie">
<!--下拉框默认显示 -->
<option disabled value="">请选择</option>
<option value="钢铁侠">钢铁侠</option>
<option value="复仇者联盟">复仇者联盟</option>
</select>
</div> <script src="../js/vue.js"></script> <script>
new Vue({
el:'#app',
data:{
// movie:'',
movie:'钢铁侠'
},
methods:{
}
})
</script>
</body>
- movie值为空时默认显示：
- movie值为‘钢铁侠’时显示：
- movie值为空，添加<option disabled value="">请选择</option>后，默认显示：
- 下拉框操作后显示：
- 多选下拉框双向绑定
<body>
<div id="app">
<span>请选择你喜欢的电影：{{selectMovie}}</span><br>
<select v-model="selectMovie" multiple size="4">
<!--下拉框默认显示 -->
<option disabled value="">请选择</option>
<option value="变形金刚">钢铁侠</option>
<option value="复仇者联盟">复仇者联盟</option>
<option value="头号玩家">头号玩家</option>
</select>
</div> <script src="../js/vue.js"></script> <script>
new Vue({
el:'#app',
data:{
selectMovie:'',
},
methods:{
}
})
</script>
</body>
默认显示：
选择后显示：
动态值绑定
<body>
<div id="app">
<span>请选择你喜欢的电影：{{Movie}}</span><br>
//"Movie"双向数据绑定”，和data中“Movie”进行了关联
<select v-model="Movie">
<!--下拉框默认显示 -->
<option disabled value="">请选择</option>
<!--循环后option中的值为：{"name":"变形金刚","id":1}等3个;value:不加v-bing取值的是字符串，加上后，才会是取值的option的id-->
<option v-for="option in options" v-bing:value="option.id">{{option.name}}</option>
</select>
</div> <script src="../js/vue.js"></script> <script>
new Vue({
el:'#app',
data:{
Movie:'',
// id:可以理解为后台对“变形金刚”录入的主键ID
options:[{"name":"变形金刚","id":1},{"name":"复仇者联盟","id":2},{"name":"头号玩家","id":3}],
},
methods:{
}
})
</script>
</body>
默认显示：
选择后显示：
最新文章
- K-Means聚类和EM算法复习总结
- c++引用总结
- SSE技术详解：一种全新的HTML5服务器推送事件技术
- Windows cmd 颜色，字体，color font set up
- Oracle NoLogging Append 方式减少批量insert的redo_size
- SQL用法总结
- POJ 1686 Lazy Math Instructor (模似题+栈的运用) 各种坑
- MySQL 通配符学习小结
- Could not open ServletContext resource [/WEB-INF/applicationContext.xml]解决方法
- iOS_SN_BlueTooth （二）iOS 连接外设的代码实现
- 使用SSIS对Dynamics CRM 系统进行数据迁移
- # 20175333曹雅坤《Java程序设计》第七周学习总结
- 爬虫下载校花网美女信息-lxml
- 网络操作基础（one）
- leetCode58. 最后一个单词的长度
- AX_CreateAndPostPurch
- Mysql授权root用户远程登录
- 实验二：Linux下Xen环境的安装
- 一个价格，两份大礼！Mockplus X MindManager限时联合大促
- JDK8字符串拼接的正确姿势