vue js 根据对象里有几项，判断分隔符是否显隐

【通义AI】的解答

在 Vue.js 中，要计算一个对象中有多少个键值对（即对象的属性数量），你可以使用 JavaScript 的 Object.keys() 方法。Object.keys() 方法会返回一个由一个给定对象的所有可枚举属性组成的数组，然后你可以使用 .length 属性来得到这个数组的长度，从而知道对象中有多少个属性。

以下是一个示例代码片段，展示如何在 Vue.js 中使用 Object.keys() 方法来计算对象的属性数量：

<template>
  <div>
    <p>对象 {{ myObject }} 包含 {{ propertyCount }} 个属性。</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myObject: {
        name: 'John Doe',
        age: 30,
        city: 'New York'
      }
    };
  },
  computed: {
    propertyCount() {
      return Object.keys(this.myObject).length;  // 关键句
    }
  }
};
</script>

在这个例子中，myObject 是一个包含三个属性的对象。propertyCount 是一个计算属性，它使用 Object.keys() 方法来返回 myObject 中的属性数量。

如果你想计算所有属性，包括不可枚举属性和继承的属性，你可以使用 for...in 循环或者 Object.getOwnPropertyNames() 和 getOwnPropertyDescriptor() 方法结合使用，但通常在 Vue.js 应用中，我们只关心可枚举的自身属性。

---

根据解答，实际使用如下

<template>
  <div v-for="val in item.textList" :key="val.txt">
    <div class="mr-8" v-for="(txt, key, keyindex) in val" :key="keyindex">
      {{ txt }} <span class="ml-4 mr-4" v-if="keyindex != Object.keys(val).length-1 ">|</span>
    </div>
  </div>
</template>

data结构参考

list: [
// ....

{
  id: "1000000014",
  label: "label",
  textList: [
    {
      name: "txtName1",
      value: "val1"
    },
    {
      name: "txtName1",
      value: "val1",
      type: "type1"
    },
  ],
},

//...

]