vue如何動(dòng)態(tài)給data中添加變量

更新時(shí)間：2024年03月24日 15:43:29 作者：每逢佳節(jié)掉三根.

這篇文章主要介紹了vue如何動(dòng)態(tài)給data中添加變量問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue動(dòng)態(tài)給data中添加變量

我的業(yè)務(wù)是動(dòng)態(tài)給v-model賦值但是你得更改所以做不到一對(duì)一這時(shí)候你就得動(dòng)態(tài)創(chuàng)建變量

首先你得知道你的數(shù)據(jù)結(jié)構(gòu)是什么樣的,然后你根據(jù)你數(shù)據(jù)的結(jié)構(gòu)用數(shù)組動(dòng)態(tài)創(chuàng)建變量

然后用你創(chuàng)建的空數(shù)組一一對(duì)應(yīng)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="請(qǐng)輸入措施內(nèi)容" v-model="timeSet[index][idx].measureText"></textarea>
                    </div>
                    <div class="question-options form-item-group">
                        <div class="module-wrapper half">
                            <!-- 時(shí)間選擇(帶標(biāo)題) -->
                            <div class="form-item with-label">
                                <p class="label">任務(wù)結(jié)束時(shí)間<span class="required">*</span></p>
                                <div class="module">
                                    <flat-pickr :config="pickrConfig" placeholder="請(qǐng)選擇結(jié)束時(shí)間" v-model="timeSet[index][idx].stopTime"></flat-pickr>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</div>

vue給data中的變量動(dòng)態(tài)添加后綴

比如在data中聲明的show1、show2、show3、show4，會(huì)有場(chǎng)景使用時(shí)是showX

需要用到一個(gè)變量去賦值1、2、3、4…

let index = 1/2/3/4
this[`show${index}`]

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue router錯(cuò)誤跳轉(zhuǎn)到首頁(yè)("/")的問(wèn)題及解決
這篇文章主要介紹了Vue router錯(cuò)誤跳轉(zhuǎn)到首頁(yè)("/")的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue基于el-table拓展之table-plus組件
本文主要介紹了vue基于el-table拓展之table-plus組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
Vue實(shí)現(xiàn)半自動(dòng)打字機(jī)特效
本文主要介紹了Vue實(shí)現(xiàn)半自動(dòng)打字機(jī)特效,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-12-12
VUE 動(dòng)態(tài)組件的應(yīng)用案例分析
這篇文章主要介紹了VUE 動(dòng)態(tài)組件的應(yīng)用,結(jié)合具體案例形式分析了vue.js動(dòng)態(tài)組件的應(yīng)用場(chǎng)景、解決方案及相關(guān)操作技巧,需要的朋友可以參考下
2019-12-12
Vue3+Element+Ts實(shí)現(xiàn)表單的基礎(chǔ)搜索重置等功能
本文主要介紹了Vue3+Element+Ts實(shí)現(xiàn)表單的基礎(chǔ)搜索重置等功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-12-12
Vue中的Vux配置指南
Vux是Vue.js的一個(gè)ui庫(kù)，官網(wǎng)在這里，官方文檔的配置指南側(cè)重于技術(shù)的羅列，我這里簡(jiǎn)化一下Vux的配置流程。感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧
2017-12-12
Vue?ElementUI?table實(shí)現(xiàn)雙擊修改編輯某個(gè)內(nèi)容的方法
在實(shí)現(xiàn)表格單元格雙擊編輯功能時(shí),需使用@cell-dblclick事件來(lái)觸發(fā)雙擊操作,將單元格切換為input輸入框,通過(guò)ref引用和綁定失焦及回車事件來(lái)確認(rèn)編輯,同時(shí),需要處理編輯數(shù)據(jù)的更新和方法邏輯的完善
2024-09-09
vue單頁(yè)應(yīng)用中如何使用jquery的方法示例
最近在工作中遇到的一個(gè)需求，需要在vue-cli建立的應(yīng)用中引入jquery的方式，通過(guò)查找相關(guān)的資料最終解決了，所以這篇文章主要給大家介紹了關(guān)于在vue單頁(yè)應(yīng)用中如何使用jquery的方法示例，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-07-07
幾分鐘弄懂Vuex的五大屬性和使用方式
這篇文章主要介紹了幾分鐘弄懂Vuex的五大屬性和使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue之關(guān)于異步更新細(xì)節(jié)
這篇文章主要介紹了Vue之關(guān)于異步更新細(xì)節(jié),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-06-06