?類似于這樣的數(shù)據(jù)有若干條，我們希望展示的方式為

 "Data": [
        {
            "和我同眠的床伴【熊貓：花花，狗熊：阿壯】": "我的朋友"
        }
    ],

我的朋友：

? ? ? ? 陪我同眠的床伴【熊貓：花花，狗熊：阿壯】

此時在代碼中的應該如果來寫？

 if (resData.Data.length > 0) {
              this.warnDialogArr = JSON.parse(JSON.stringify(resData.Data));
            }

 <div v-for="(item, index) in warnDialogArr" :key="index" class="renzhi">
            <p>{{ item[Object.keys(item)[0]] }}:</p>
            <p>{{ (Object.keys(item)[0])}}</p>
        </div>

{{?item[Object.keys(item)[0]]?}}?會顯示數(shù)組元素的值，而?(Object.keys(item)[0])?會顯示數(shù)組元素的鍵。

item[Object.keys(item)[0]]會根據(jù)item對象的第一個鍵的值來顯示對應的數(shù)值。而括號()內(nèi)的表達式不會被計算，而是直接顯示表達式的值。在這個表達式中，(Object.keys(item)[0])會直接顯示item對象的第一個鍵?。。?/span>

當后端返回這樣兩個這樣的對象給我們的時候，應該如何去取數(shù)值？一個對象表示某種情況前，一個對象表示某種情況后。

1ade702bc1d4910ceacfb2378e2c34ec: "3人"
0056f000605fbddb7620ac5b57437354: "<span style='color:#E59F17'>60</span>%"
94f0aad3494c25743ac7cc3897025f15: "<span style='color:#E59F17'>1.6</span>年"
54049214b8d7660f9a6ad722f1eb6a0c: "<span style='color:#E59F17'>46.4</span>歲"
a31f62983369036a564af625b0c3ce0a: "1人"
cfdd01f734abea0be0919ca07944f68f: "3人"
d723e8003583e01474df8afdd3bc4b7c: "5人"

第一：寫一個循環(huán)，來遍歷這個對象，使用一個方法haveNumber來獲取數(shù)值。

 <div v-for="(item, index) in fenxiData" :key="index">
            {{ haveNumber(item["0056f000605fbddb7620ac5b57437354"]) }}%
          </div>

?例如：item["0056f000605fbddb7620ac5b57437354"]獲取到的則是：

<span style='color:#E59F17'>60</span>%

第二：這段代碼首先檢查字符串?str?是否包含?"span"，如果包含，則使用正則表達式匹配?str?中的?>?和?<?之間的內(nèi)容，如果匹配成功且結果數(shù)組長度大于1，則返回匹配到的內(nèi)容，否則返回原始字符串。如果字符串不包含?"span"，則直接返回原始字符串。

    haveNumber(str) {
      if (str.includes("span")) {
        let match = str.match(/>(.*?)</);
   
        if (match && match.length > 1) {
          return match[1]; // 這將會是 "100"
        } else {
          return str;
        }
      } else {
        return str;
      }
    },

?文章來源地址http://www.zghlxwxcb.cn/news/detail-798271.html

到了這里，關于javaScript中對象使用遍歷渲染鍵值對取值，Vue的{{}}中寫方法獲取值。的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！