vue如何动态给data中添加变量
更新时间:2024年03月24日 15:43:29 作者:每逢佳节掉三根.
这篇文章主要介绍了vue如何动态给data中添加变量问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud)
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
vue动态给data中添加变量
我的业务是动态给v-model赋值 但是你得更改所以做不到一对一这时候你就得动态创建变量
首先你得知道你的数据结构是什么样的,然后你根据你数据的结构用数组动态创建变量
然后用你创建的空数组一一对应v-model赋值
- js:
for (var i =0;i< _this.particulars.itemList.length;i++) { _this.timeSet.push([]); for (var k = 0;k<_this.particulars.itemList[i].taskList.length;k++) { _this.timeSet[i].push({stopTime:'',measureText:''}); } }
- data:
timeSet : [];
- html:
<div class="module"> <div class="question-group" v-for="(item,index) in particulars.itemList" :key="index"> <p class="group-title">{{item.title}}</p> <div class="group-content" v-for="(list,idx) in item.taskList" :key="idx"> <div class="question"> <div class="question-type">整</div> <p class="question-title">{{list.clauseContent}}</p> <div class="question-sub"> <p class="title">凭证详情</p> <textarea class="input-show" placeholder="请输入措施内容" v-model="timeSet[index][idx].measureText"></textarea> </div> <div class="question-options form-item-group"> <div class="module-wrapper half"> <!-- 时间选择(带标题) --> <div class="form-item with-label"> <p class="label">任务结束时间<span class="required">*</span></p> <div class="module"> <flat-pickr :config="pickrConfig" placeholder="请选择结束时间" v-model="timeSet[index][idx].stopTime"></flat-pickr> </div> </div> </div> </div> </div> </div> </div> </div>
vue给data中的变量动态添加后缀
比如在data中声明的show1、show2、show3、show4,会有场景使用时是showX
需要用到一个变量去赋值1、2、3、4…
let index = 1/2/3/4 this[`show${index}`]
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持程序员之家。
相关文章
vue.js组件vue-waterfall-easy实现瀑布流效果
这篇文章主要为大家详细介绍了vue.js实现瀑布流之vue-waterfall-easy的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-08-08
最新评论