vue如何动态给data中添加变量

 更新时间:2024年03月24日 15:43:29   作者:每逢佳节掉三根.  
这篇文章主要介绍了vue如何动态给data中添加变量问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

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 router错误跳转到首页("/")的问题及解决

    Vue router错误跳转到首页("/")的问题及解决

    这篇文章主要介绍了Vue router错误跳转到首页("/")的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue基于el-table拓展之table-plus组件

    vue基于el-table拓展之table-plus组件

    本文主要介绍了vue基于el-table拓展之table-plus组件,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue实现半自动打字机特效

    Vue实现半自动打字机特效

    本文主要介绍了Vue实现半自动打字机特效,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-12-12
  • VUE 动态组件的应用案例分析

    VUE 动态组件的应用案例分析

    这篇文章主要介绍了VUE 动态组件的应用,结合具体案例形式分析了vue.js动态组件的应用场景、解决方案及相关操作技巧,需要的朋友可以参考下
    2019-12-12
  • Vue3+Element+Ts实现表单的基础搜索重置等功能

    Vue3+Element+Ts实现表单的基础搜索重置等功能

    本文主要介绍了Vue3+Element+Ts实现表单的基础搜索重置等功能,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-12-12
  • Vue中的Vux配置指南

    Vue中的Vux配置指南

    Vux是Vue.js的一个ui库,官网在这里,官方文档的配置指南侧重于技术的罗列,我这里简化一下Vux的配置流程。感兴趣的朋友跟随脚本之家小编一起学习吧
    2017-12-12
  • Vue ElementUI table实现双击修改编辑某个内容的方法

    Vue ElementUI table实现双击修改编辑某个内容的方法

    在实现表格单元格双击编辑功能时,需使用@cell-dblclick事件来触发双击操作,将单元格切换为input输入框,通过ref引用和绑定失焦及回车事件来确认编辑,同时,需要处理编辑数据的更新和方法逻辑的完善
    2024-09-09
  • vue单页应用中如何使用jquery的方法示例

    vue单页应用中如何使用jquery的方法示例

    最近在工作中遇到的一个需求,需要在vue-cli建立的应用中引入jquery的方式,通过查找相关的资料最终解决了,所以这篇文章主要给大家介绍了关于在vue单页应用中如何使用jquery的方法示例,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-07-07
  • 几分钟弄懂Vuex的五大属性和使用方式

    几分钟弄懂Vuex的五大属性和使用方式

    这篇文章主要介绍了几分钟弄懂Vuex的五大属性和使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue之关于异步更新细节

    Vue之关于异步更新细节

    这篇文章主要介绍了Vue之关于异步更新细节,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06

最新评论