首页 / VUE / Vue动态添加v-model绑定及获取其返回数据

Vue动态添加v-model绑定及获取其返回数据

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Vue动态添加v-model绑定及获取其返回数据，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1130字，纯文字阅读大概需要2分钟。

内容图文

从数据库拿到的动态数据绑定到页面对应的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

内容总结

以上是互联网集市为您收集整理的Vue动态添加v-model绑定及获取其返回数据全部内容，希望文章能够帮你解决Vue动态添加v-model绑定及获取其返回数据所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1144543.html

来源：【匿名】