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項(xiàng)目中如何配置env環(huán)境的實(shí)現(xiàn)
本文主要介紹了vue項(xiàng)目中如何配置env環(huán)境的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
Element?ui關(guān)閉el-dialog時(shí)如何清除數(shù)據(jù)
這篇文章主要介紹了Element?ui關(guān)閉el-dialog時(shí)如何清除數(shù)據(jù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-02-02
Vue3多組件的N種編寫(xiě)方式
Vue 本身以及周邊生態(tài)在設(shè)計(jì)語(yǔ)法糖上幾乎沒(méi)讓我失望過(guò),包括本次亮相的 Vue Vine,它的出現(xiàn)引起了我對(duì) Vue3 組件編寫(xiě)方式的好奇,以及哪一種方式更接近「最佳實(shí)踐」？下面讓我來(lái)為大家一一道來(lái)
2024-07-07
在Vue中實(shí)現(xiàn)頁(yè)面狀態(tài)保存的各種方法
作為前端開(kāi)發(fā)者,你一定遇到過(guò)這樣的場(chǎng)景：用戶在一個(gè)復(fù)雜的表單頁(yè)面填寫(xiě)了大量信息,不小心刷新了頁(yè)面或點(diǎn)擊了返回按鈕,所有數(shù)據(jù)都消失了！所以今天我們來(lái)深入探討在 Vue 中實(shí)現(xiàn)頁(yè)面狀態(tài)保存的各種方法,需要的朋友可以參考下
2026-01-01
加快Vue項(xiàng)目的開(kāi)發(fā)速度的方法
這篇文章主要介紹了加快Vue項(xiàng)目的開(kāi)發(fā)速度的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12
解決vue路由name同名,路由重復(fù)的問(wèn)題
這篇文章主要介紹了解決vue路由name同名,路由重復(fù)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
Django+Vue跨域環(huán)境配置詳解
這篇文章主要介紹了Django+Vue跨域環(huán)境配置詳解,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-07-07
一篇文章帶你吃透Vuex3的狀態(tài)管理
Vuex是一個(gè)專為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式,它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化,下面這篇文章主要給大家介紹了關(guān)于如何通過(guò)一篇文章帶你吃透Vuex3的狀態(tài)管理,需要的朋友可以參考下
2022-07-07
Vue實(shí)現(xiàn)色板功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)色板功能，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價(jià)值，感興趣的小伙伴可以了解一下
2023-06-06
詳解vue2.0組件通信各種情況總結(jié)與實(shí)例分析
本篇文章主要介紹了詳解vue2.0組件通信各種情況總結(jié)與實(shí)例分析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-03-03