vue中如何動態(tài)拼接this后面的變量

更新時間：2023年07月05日 14:33:39 作者：起啥名呢啊

這篇文章主要介紹了vue中如何動態(tài)拼接this后面的變量問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue動態(tài)拼接this后面的變量

寫項目的用到for循環(huán)，動態(tài)拼接變量，用了幾種方法不行，終于找到一種，記錄一下：

? ?for (let i = 1; i <= 4; i++) {
? ? ? ? let data = { RequestType: "Get", portNumber: i + "" };
? ? ? ? console.log(i);
? ? ? ? console.log(this["Str" + i]); ? ?
? ? ? ? this.$axios
? ? ? ? ? .post("/api/config/dev", data)
? ? ? ? ? .then((res) => {
? ? ? ? ? ? let data = res.data;
? ? ? ? ? ? this["Str" + i][1].xinxi = data.subtemperature; // 子設備溫度1
? ? ? ? ? })
? ? ? ? ? .catch((error) => {
? ? ? ? ? ? console.log(error);
? ? ? ? ? });
? ? ? }

直接在this后面加[]，在里面添加你要拼接的內容！

親測有效!!!

react、vue動態(tài)拼接key（動態(tài)拼接key或者其他參數(shù)）

react動態(tài)拼接

在這里插入圖片描述

這里拿到的拿到的這個值‘roomDisabled’是一個字符串，并不是一個變量的值，

解決辦法：

{this.state[${type}Disabled]}

例子：

在這里插入圖片描述

vue動態(tài)拼接

  let  addRoom = '新增';
  let  editRoom = '修改';
  let  key='Room';
  console.log('test',this['addRoom'],this['editRoom'],this[`add${[this.key]}`])

在這里插入圖片描述

總結

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

您可能感興趣的文章:

vue?數(shù)組添加數(shù)據(jù)方式
這篇文章主要介紹了vue?數(shù)組添加數(shù)據(jù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
VueCLI通過process.env配置環(huán)境變量的實現(xiàn)
本文主要介紹了VueCLI通過process.env配置環(huán)境變量的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-07-07
vue-router vuex-oidc動態(tài)路由實例及功能詳解
這篇文章主要為大家介紹了vue-router vuex-oidc動態(tài)路由實例及功能詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-11-11
在vue中使用Echarts畫曲線圖的示例
這篇文章主要介紹了在vue中使用Echarts畫曲線圖的示例，幫助大家在vue中繪制圖表，感興趣的朋友可以了解下
2020-10-10
Vue+Koa+MongoDB從零打造一個任務管理系統(tǒng)的詳細過程
這篇文章主要介紹了Vue+Koa+MongoDB從零打造一個任務管理系統(tǒng),本文通過圖文實例代碼相結合給大家介紹的非常詳細，需要的朋友可以參考下
2022-08-08
vue3鼠標拖拽滑動效果實現(xiàn)demo
這篇文章主要為大家介紹了vue3鼠標拖拽滑動效果實現(xiàn)demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-12-12
Vue操作數(shù)組的幾種常用方法小結
本文主要介紹了Vue操作數(shù)組的幾種常用方法小結,主要包括map、filter、forEach、find 和 findIndex 、some 和 every、includes、Array.from這幾種方法,感興趣的可以了解一下
2023-09-09
vue打印功能實現(xiàn)的兩種方法總結
在項目中,有時需要打印頁面的表格,所以下面這篇文章主要給大家介紹了關于vue打印功能實現(xiàn)的兩種方法,以及批量打印的完整代碼,需要的朋友可以參考下
2021-06-06
實例講解vue源碼架構
在本篇文章中小編給大家分享了關于vue源碼架構的相關知識點內容，有需要的朋友們學習下。
2019-01-01
vue制作toast組件npm包示例代碼
這篇文章主要介紹了vue制作一個toast組件npm包,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-10-10