vue如何動態(tài)給data中添加變量
更新時間：2024年03月24日 15:43:29 作者：每逢佳節(jié)掉三根.
這篇文章主要介紹了vue如何動態(tài)給data中添加變量問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue動態(tài)給data中添加變量
我的業(yè)務是動態(tài)給v-model賦值 但是你得更改所以做不到一對一這時候你就得動態(tài)創(chuàng)建變量
首先你得知道你的數(shù)據(jù)結(jié)構(gòu)是什么樣的,然后你根據(jù)你數(shù)據(jù)的結(jié)構(gòu)用數(shù)組動態(tài)創(chuàng)建變量
然后用你創(chuàng)建的空數(shù)組一一對應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="請輸入措施內(nèi)容" 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">任務結(jié)束時間<span class="required">*</span></p>
<div class="module">
<flat-pickr :config="pickrConfig" placeholder="請選擇結(jié)束時間" v-model="timeSet[index][idx].stopTime"></flat-pickr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>vue給data中的變量動態(tài)添加后綴
比如在data中聲明的show1、show2、show3、show4，會有場景使用時是showX
需要用到一個變量去賦值1、2、3、4…
let index = 1/2/3/4
this[`show${index}`]總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue router錯誤跳轉(zhuǎn)到首頁("/")的問題及解決
這篇文章主要介紹了Vue router錯誤跳轉(zhuǎn)到首頁("/")的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本文主要介紹了vue基于el-table拓展之table-plus組件，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
本文主要介紹了Vue實現(xiàn)半自動打字機特效,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-12-12
這篇文章主要介紹了VUE 動態(tài)組件的應用,結(jié)合具體案例形式分析了vue.js動態(tài)組件的應用場景、解決方案及相關(guān)操作技巧,需要的朋友可以參考下2019-12-12
Vue3+Element+Ts實現(xiàn)表單的基礎(chǔ)搜索重置等功能
本文主要介紹了Vue3+Element+Ts實現(xiàn)表單的基礎(chǔ)搜索重置等功能，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
Vux是Vue.js的一個ui庫，官網(wǎng)在這里，官方文檔的配置指南側(cè)重于技術(shù)的羅列，我這里簡化一下Vux的配置流程。感興趣的朋友跟隨腳本之家小編一起學習吧2017-12-12
Vue?ElementUI?table實現(xiàn)雙擊修改編輯某個內(nèi)容的方法
在實現(xiàn)表格單元格雙擊編輯功能時,需使用@cell-dblclick事件來觸發(fā)雙擊操作,將單元格切換為input輸入框,通過ref引用和綁定失焦及回車事件來確認編輯,同時,需要處理編輯數(shù)據(jù)的更新和方法邏輯的完善2024-09-09
最近在工作中遇到的一個需求，需要在vue-cli建立的應用中引入jquery的方式，通過查找相關(guān)的資料最終解決了，所以這篇文章主要給大家介紹了關(guān)于在vue單頁應用中如何使用jquery的方法示例，需要的朋友可以參考借鑒，下面來一起看看吧。2017-07-07
這篇文章主要介紹了幾分鐘弄懂Vuex的五大屬性和使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue之關(guān)于異步更新細節(jié),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06