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