如何使用 Vue 循环对象，类似于 PHP？

Question

我有一个我的对象如下

$object_zero = {
    'one' : 'one year',
    'two' : 'two year',
    'three' : 'there year',
    'four' : 'four year',
    'five' : 'five year',
    'six' : 'six year',
    'seven' : 'seven year',
    'eight' : 'eight year',
};

我有一个其他对象如下

$object = { 'one' : '1 Year', 'two' : '2 Year', 'three' : '3 Year', 'akta' : '12', 'mars' : '48' }

我可以用 php 来完成，如下所示。

foreach($object_zero as $key => $val){
     echo $object->$key;
}

那么我该如何使用 vue.js 做到这一点呢？

我无法启动它。我的目标是只编写包含第一个对象的键的文本

<div v-for="(v, k, index) in data.object_zero">
      <p v-if="object.k" class="mb-0">
          {{ object.k }} - 
      </p>
</div>

例如，只有这些应该写在屏幕上。

print: 1 Year - 2 Year - 3 Year

Answer 1

您可以像这样循环访问 Vue 模板中对象的属性：

<div v-for="(value, key) in object" :key="key">
  {{ key }}: {{ value }}
</div>

请记住，严格来说，JavaScript 中的对象没有定义的顺序。Vue.js 采用 的顺序Object.keys()，这可能会产生您不期望的输出。通常在这种情况下您会希望使用数组。

另请参阅文档：https://v2.vuejs.org/v2/guide/list.html#v-for-with-an-Object

Answer 2

JavaScript 中的数组没有键。

考虑使用一个对象来代替，就像这样

notAnArray : {
    'one': '1 Year',
    'two': '2 Year',
    'three': '3 Year'
}

请参阅Vue 中的数组示例。

模板

notAnArray : {
    'one': '1 Year',
    'two': '2 Year',
    'three': '3 Year'
}

大批

  <div v-for="(val, index) in array" :key="index">
    <p>
      {{val}}
    </p>
  </div>