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时,其数据也是改变后的数据

原文地址:https://www.cnblogs.com/bomdeyada/p/10199100.html

时间: 2024-10-09 22:47:13

Vue动态添加v-model绑定及获取其返回数据的相关文章

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

从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代码的时候就注册了相应绑定的事件,我们平常用jQuery给HTML标签绑定(单击)事件是一般这样写 $("#btnId").click(function () { //触发事件后 逻辑 });  但是对用js动态添加的元素 是无效的,即没有绑定单击事件,所以对于动态添加的标签需要用on()来

jQuery给动态添加的元素绑定事件的方法

jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这里介绍jQuery中如何给动态添加的元素绑定事件在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况 例如 1 <div id="testdiv"> 2 <ul></ul> 3 </div> 需要给<ul>里面动态添加的

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

样例: $("#modify_nick").click(function () { $(this).css("display","none"); $("#nickname_span").empty(); var input = document.createElement("input"); $(input).attr("type", "text"); $(input

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

jquery 为动态添加的元素绑定事件 如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上 可以用delegate来实现 .delegate( selector, eventType, handler ) 例如示例: $('someUlSelector').delegate('someLiSelector','click',function(){ //codes... //$(this) for the current jquery instance of

jQuery动态添加的元素绑定事件处理函数代码

jQuery动态添加的元素绑定事件处理函数代码 作者: 字体:[增加 减小] 类型:转载 有一段时间没用jquery了,今天又碰到这个问题.当时是知道有livejquery可以解决.但是我并不喜欢为了这个而另外加载一个. 我当时的处理方法是在添加的时候手工绑定事件处理函数.不过新版的jquery已经添加了这个功能.我们已经不需要为此烦恼了. 参考:http://api.jquery.com/live/ 以前我们定义事件,比如为元素定义单击事件是这样写的: 复制代码 代码如下: $('input'

jquery动态添加的元素绑定的事件不生效的问题

我们可以通过 $(document).on('click', '#xxx', callback) 这种形式解决. 原因,一般情况下,我们是通过 $('#xxx').click(callback) 这种形式去绑定,这种绑定之所以生效是因为,我们程序加载 $(function(){}) 的时候绑定了回调,而动态添加上去的,我们并没有去绑定. 所以动态添加的元素,点击的时候并不会触发我们想要的效果.但是实际上,在我们点击的时候,还是产生了点击事件,只是这个事件没有被我们的预期回调处理,因为我们的回调没

vue动态添加路由addRoutes之不能将动态路由存入缓存

在我不知道vue的路由还可以通过addRoutes动态添加时,我只知道vue的路由都是写死在路由表中的,每当跳转时再去加载相应的路由.直到在一个新公司接到需要根据用户的权限显示不同的菜单的需求时才知道了原来vue-router还有一个addRoutes的API,立马研究了一下. router.addRoutes: 函数签名: router.addRoutes(routes: Array<RouteConfig>) 动态添加更多的路由规则.参数必须是一个符合routes选项要求的数组. 点这里去

vue动态添加当前事件下的class

html部分<div class="star"> <span v-for="(item,index) in 5" @click="clickStar($event)"></span></div>说明:遍历span 5次,得到5组span,$event为目标事件 js部分 clickStar($event){ $event.currentTarget.className='active';//cons

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

<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("body").on('click','p',function(){ $(this).hide(); }); }); </script>