javaScript中对象使用遍历渲染键值对取值，Vue的{{}}中写方法获取值。

这篇具有很好参考价值的文章主要介绍了javaScript中对象使用遍历渲染键值对取值，Vue的{{}}中写方法获取值。。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

类似于这样的数据有若干条，我们希望展示的方式为

 "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]] }} 会显示数组元素的值，而 (Object.keys(item)[0]) 会显示数组元素的键。

item[Object.keys(item)[0]]会根据item对象的第一个键的值来显示对应的数值。而括号()内的表达式不会被计算，而是直接显示表达式的值。在这个表达式中，(Object.keys(item)[0])会直接显示item对象的第一个键！！！

当后端返回这样两个这样的对象给我们的时候，应该如何去取数值？一个对象表示某种情况前，一个对象表示某种情况后。

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人"

第一：写一个循环，来遍历这个对象，使用一个方法haveNumber来获取数值。

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

例如：item["0056f000605fbddb7620ac5b57437354"]获取到的则是：

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

第二：这段代码首先检查字符串 str 是否包含 "span"，如果包含，则使用正则表达式匹配 str 中的 > 和 < 之间的内容，如果匹配成功且结果数组长度大于1，则返回匹配到的内容，否则返回原始字符串。如果字符串不包含 "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;
      }
    },

文章来源地址https://www.toymoban.com/news/detail-798271.html

到了这里，关于javaScript中对象使用遍历渲染键值对取值，Vue的{{}}中写方法获取值。的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！