Vue基础（2）双向绑定
双向数据绑定
- 通过修改标签，例：切换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>
默认显示：
选择后显示：
Vue基础（2）双向绑定的更多相关文章
- vue.js初级入门之最基础的双向绑定操作
首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jquery) 引用的时候需要注意文件的路径,准备工作这样基本就完成了,下面正式开始入门. vue. ...
- Vue框架之双向绑定事件
Vue框架之双向绑定事件 首先介绍下Vue框架的语法 vue通过 {{temp}} 来渲染变量 {{count+100}} # 求和 v-text # 为标签插入text文本 v-html # 为标签 ...
- 用ES6的class模仿Vue写一个双向绑定
原文地址:用ES6的class模仿Vue写一个双向绑定 点击在线尝试一下 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods cla ...
- 组件的通信 ：provide / inject 对象进入后，就等于不用props，然后内部对象，直接复制可以接受数组，属性不能直接复制，可以用Object.assgin覆盖对象，或者Vue的set 双向绑定数据
组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双 ...
- Vue的数据双向绑定和Object.defineProperty()
Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...
- 原生js实现 vue的数据双向绑定
原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...
- vue.js 中双向绑定的实现---初级
1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...
- 剖析Vue原理&实现双向绑定MVVM-1
本文能帮你做什么?1.了解vue的双向数据绑定原理以及核心代码模块2.缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考 ...
- vue中数据双向绑定注意点
最近一个vue和element的项目中遇到了一个问题: 动态生成的对象进行双向绑定是失败 直接贴代码: <el-form :model="addClass" :rules=& ...
- vue中数据双向绑定的实现原理
vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...
随机推荐
- python时间加减
要用到生成时间,在当前日期前/后xx天.xx小时.xx分钟.xx秒 # coding:utf8 from datetime import datetime, timedelta def gen_dat ...
- mysql：数据库加解密查询
解密:SELECT CONVERT (AES_DECRYPT(UNHEX( column_name), '密钥') USING utf8) AS column_name,from table_name ...
- appium:报错Message: Message: Parameters were incorrect. We wanted {"required":["value"]}
python版本3.7.4,selenium版本4.0.0,Appium-Python-Client版本2.0.0,报错见标题 别人给出的建议:https://blog.csdn.net/liangs ...
- 打开Access时电脑出现蓝屏，错误编号0x00000116的问题解决
Windows7 64位旗舰版,在打开Access 2013,Onenote 2013时均会出现蓝屏,现就出现蓝屏问题解决方法给大家做一个分享. 步骤: 1.右击我的电脑,打开设备管理器 2.按顺序1 ...
- [iOS]Universal Link
从零开始的操作流程在后面,这里把几个坑先挪到前面来 便于查看: ️ apple-app-site-association 只会在APP第一次启动的时候请求一次,因此文件的任何更新的验证都需要APP重新 ...
- git仓库搭建及免密使用
- IIS7无法访问.apk文件的解决方法
随着智能手机的普及,越来越多的人使用手机上网,很多网站也应手机上网的需要推出了网站客户端,.apk文件就是安卓(Android)的应用程序后缀名,默认情况下,使用IIS作为Web服务器的无法访问下载此 ...
- 微信小程序 switch
微信小程序 switch 组件 的大小调整方法: 加上 zoom:数值 ==>数值在0到1之间
- ISP（图像信号处理）算法概述、工作原理、架构、处理流程
目录 ISP的主要内部构成: ISP内部包含 CPU.SUP IP(各种功能模块的通称).IF 等设备 ISP的控制结构: 1.ISP逻辑 2.运行在其上的firmware ISP上的Firmware ...
- 安装kubernetes dashboard以及用户授权
kubernetes 版本v1.25.3 1.安装 版本查看:https://github.com/kubernetes/dashboard/releases kubectl apply -f htt ...