从数据库拿到的动态数据绑定到页面对应的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绑定及获取其返回数据的更多相关文章

  1. js动态添加的元素绑定事件

    最近做的项目要实现一个动态添加动态删除的功能,思考了一下,该怎么给动态添加的元素绑定事件.最后觉得有两种方式比较可靠,第一种是在动态添加的html代码里添加oclick事件,然后给传个唯一的参数来判断 ...

  2. Jquery动态添加的元素绑定事件的3种方法

    假设我们点击li标签,弹出他的文本,如果是动态添加的li,点击是没有效果的,压根弹不出来文本. 下面博主分享一下为动态添加的元素绑定事件的三种方法,网上一般都是两种,我在这里多增加了一种. 事件案例: ...

  3. jQuery对 动态添加 的元素 绑定事件(on()的用法)

    从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代 ...

  4. jQuery 为动态添加的元素绑定事件

    在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...

  5. WEB前端技巧之JQuery为动态添加的元素绑定事件.md

      jquery 为动态添加的元素绑定事件 如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上 可以用delegate来实现 .delegate( select ...

  6. jQuery中如何给动态添加的元素绑定事件

    jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这 ...

  7. 在页面中添加两个 <select> 标签,用来显示年份和月份;同时添加两个 <ul> 标签,一个用来显示星期,另一个用来显示日期 在 JavaScript 脚本中动态添加年份和月份,获取当前日期的年份

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 Date 对象,在页面上显示一个万年历.选择不同的年份和月份,在页面中显示当前月的日历 实现思路: 在页面中添加两个 <s ...

  8. js进阶ajax读取json数据(ajax读取json和读取普通文本,和获取服务器返回数据(链接)都是一样的,在url处放上json文件的地址即可)

    js进阶ajax读取json数据(ajax读取json和读取普通文本,和获取服务器返回数据(链接)都是一样的,在url处放上json文件的地址即可) 一.总结 ajax读取json和读取普通文本,和获 ...

  9. vue 动态添加 <style> 样式 vue动态添加 绑定自定义字体样式

    created(){ //动态添加自定义字体样式 let style = document.createElement('style'); style.type = "text/css&qu ...

随机推荐

  1. prepareBeanFactory方法源码跟踪

    看这篇文章之前可以先了解之前的跟踪流程,https://www.jianshu.com/p/4934233f0ead 代码过宽,可以shift + 鼠标滚轮 左右滑动查看 AbstractApplic ...

  2. HTML速写

    1. E 代表HTML标签. 2. E#id 代表id属性. 3. E.class 代表class属性. 4. E[attr=foo] 代表某一个特定属性. 5. E{foo} 代表标签包含的内容是f ...

  3. Java笔记--常用类

    1.String类: --使用Unicode字符编码,一个字符占两个字节: --String类是一个final类,代表不可变的字符序列: --字符串是不可变的,一个字符串对象一旦被配置,其内容是不可变 ...

  4. 如何用hugo搭建个人博客

    如何用hugo搭建个人博客 1. 安装 Hugo 点击跳转 Hugo Releases win10 步骤: 下载解压 , 然后添加环境变量 测试: #命令行测试 hugo version 2. 创建站 ...

  5. DNS原理和智能DNS及CDN

    CDN是什么 CDN(Content Delivery Network)是内容分发网络. 作用: 使用户可以就近取的所需要的内容,加速用户访问网站资源的速度.物理距离更近,响应速度更快.拦截部分网络请 ...

  6. 139-PHP static后期静态绑定(二)

    <?php class test{ //创建test类 public function __construct(){ static::getinfo(); //后期静态绑定 } public s ...

  7. Power BI 安装注册教程

    把下载好的MSI包PBIDesktop_x64.msi 双击安装 点击下一步 选择文件路径 点击安装 点击完成 初始化中 安装完成界面 账号注册 https://powerbi.microsoft.c ...

  8. gem5-gpu全系统模式

    # 注意:安装好gem5-gpu后再配置全系统环境 # 下载全系统模拟需要的工具,详见http://gem5.org/Running_gem5#Full_System_.28FS.29_Mode,将L ...

  9. 一条 SQL 在 Apache Spark 之旅

    转载自过往记忆大数据 https://www.iteblog.com/archives/2561.html Spark SQL 是 Spark 众多组件中技术最复杂的组件之一,它同时支持 SQL 查询 ...

  10. NiFi之Processor配置

    Processor(处理器)之配置 选择一个Processor,比如ExecuteSQL,从它的名字可以看出该处理器的功能就是去执行一个sql(当然是执行的该sql必须要有返回值的),下面就以Exec ...