Vue动态添加v-model绑定及获取其返回数据
从数据库拿到的动态数据绑定到页面对应的v-model或者v-bind上,并且根据对页的操作获取到返回的值:
1、首先在data里定义一个数据 timeTip 为一个空数组
data () {
return {
timeTip:[]
}
}
2、将获取到的数据进行动态生成,并塞入 timeTip 中
creadeTimeTip(data.data) //返回的数据 creadeTimeTip(data){
this.timeTip = []; //对空数组进行清空,以免影响后续操作
var len = data.length;
for (var i = 0; i < len; i ++) {
var item = {id: String(data[i].id),
name: String(data[i].name),
timelySwitch: Boolean(data[i].timelySwitch),//注意有的页面有数据格式要求,可在此进行数据处理
timing: this.setDate(data[i].timing)
};
this.timeTip.push(item); //将处理好的数据循环放进数组中
} }
3、在Vue页面进行动态绑定,需要注意的就是在数据绑定时我用的是 timeTip[index].timelySwitch 而不是item ,否则当操作页面时是不会有动态数据返回的
<div v-for="item,index in timeTip" :key="item.id">
<span>{{index+1}}.{{item.name}}通知:</span>
<el-switch v-model="timeTip[index].timelySwitch" active-text="及时推送" inactive-text="" size="mini"></el-switch>
<el-time-picker style="width:180px;" :clearable="false" size="mini" v-model="timeTip[index].timing" placeholder="请输入24小时制时间">
</el-time-picker>
</div>
4、当在页面修改数据后,在控制器输出timeTip时,其数据也是改变后的数据
Vue动态添加v-model绑定及获取其返回数据的更多相关文章
- js动态添加的元素绑定事件
最近做的项目要实现一个动态添加动态删除的功能,思考了一下,该怎么给动态添加的元素绑定事件.最后觉得有两种方式比较可靠,第一种是在动态添加的html代码里添加oclick事件,然后给传个唯一的参数来判断 ...
- Jquery动态添加的元素绑定事件的3种方法
假设我们点击li标签,弹出他的文本,如果是动态添加的li,点击是没有效果的,压根弹不出来文本. 下面博主分享一下为动态添加的元素绑定事件的三种方法,网上一般都是两种,我在这里多增加了一种. 事件案例: ...
- jQuery对 动态添加 的元素 绑定事件(on()的用法)
从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代 ...
- jQuery 为动态添加的元素绑定事件
在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...
- WEB前端技巧之JQuery为动态添加的元素绑定事件.md
jquery 为动态添加的元素绑定事件 如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上 可以用delegate来实现 .delegate( select ...
- jQuery中如何给动态添加的元素绑定事件
jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这 ...
- 在页面中添加两个 <select> 标签,用来显示年份和月份;同时添加两个 <ul> 标签,一个用来显示星期,另一个用来显示日期 在 JavaScript 脚本中动态添加年份和月份,获取当前日期的年份
查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 Date 对象,在页面上显示一个万年历.选择不同的年份和月份,在页面中显示当前月的日历 实现思路: 在页面中添加两个 <s ...
- js进阶ajax读取json数据(ajax读取json和读取普通文本,和获取服务器返回数据(链接)都是一样的,在url处放上json文件的地址即可)
js进阶ajax读取json数据(ajax读取json和读取普通文本,和获取服务器返回数据(链接)都是一样的,在url处放上json文件的地址即可) 一.总结 ajax读取json和读取普通文本,和获 ...
- vue 动态添加 <style> 样式 vue动态添加 绑定自定义字体样式
created(){ //动态添加自定义字体样式 let style = document.createElement('style'); style.type = "text/css&qu ...
随机推荐
- day03-Python运维开发基础-(数据类型强转、运算符、逻辑短路、isinstance)
1. 强制转换成容器数据类型 # ### 强制类型转换 容器类型数据 (str list tuple set ) var1 = "你好世界" var2 = ["陈博文&q ...
- 旧iPhone遭禁,会让苹果产业链迎来新转机吗?
过去几个月,苹果的日子并不好过,先是新iPhone定价过高导致销售疲软,股价连续下跌,万亿市值失守,被微软和亚马逊超越:手机销量上则被华为赶超,整个iPhone产业链都有点儿"哀鸿遍野&qu ...
- uboot如何启动内核
2.7.1.uboot和内核到底是什么 2.7.1.1.uboot是一个裸机程序 (1)uboot的本质就是一个复杂点的裸机程序.和我们在ARM裸机全集中学习的每一个裸机程序并没有本质区别. 2.7. ...
- 【蓝桥】第八届C语言C组第7题 Excel地址(进制变形题,stack()简单使用)转载
标题: Excel地址 Excel单元格的地址表示很有趣,它使用字母来表示列号. 比如, A表示第1列, B表示第2列, Z表示第26列, AA表示第27列, AB表示第28列, BA表示第53列, ...
- 嵊州普及Day1T2
题意:走迷宫.求走到a[n][n]需要多久. 考场上想的dfs,听老师说最多50分.代码懒得码了,知道是走迷宫就好. 正解:bfs,时间复杂度O(n). 见代码: #include<iostre ...
- leetcode617 Merge Two Binary Trees
""" Given two binary trees and imagine that when you put one of them to cover the oth ...
- mqtt已断开连接(32109)
在rabbitmq下使用mqtt协议时,如果服务质量(qos)设置为2,在发布服务时会出现[已断开连接 (32109) - java.io.EOFException]的报错. 出现该报错的其他情况还有 ...
- Golang的选择结构-switch语句
Golang的选择结构-switch语句 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.选择语句应用场景概述 选择结构也称为条件判断,生活中关于判断的场景也非常的多,比如: ( ...
- Redis集群环境之linux搭建多机版---已完结,跟着一步一步来你就可以集群成功
上一篇踩着各种坑写了Redis集群环境之linux搭建单机版,这一篇准备就多机版集群进行搭建,主要目的一来是在上一篇的基础上进行精华提粹总结,二来是把单机版与多机版的区别进行记录. 首先软硬件环境: ...
- Jrebel 远程热部署[Idea]
服务器端 客户端-idea remote module 在服务器端,Tomcat的webapps下新建项目文件夹,如: demo/WEB-INF/classes/[jrebel.xml]