Question

我有如下数组

data() {
  return {
    shoppingItems: [
      {name: 'apple', price: '10'},
      {name: 'orange', price: '12'}
    ]
  }
}

我正在尝试如下迭代

<ul>
  <li v-for="item in shoppingItems">
    {{ item.name }} - {{ item.price }}
  </li>
</ul>

我得到如下输出

苹果-10
橙色-12

但是我想得到如下输出

名称-苹果，价格-10 //我想动态打印密钥
名称-橙色，价格-12

Answer 1

您可以使用this遍历键/值：

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

您还可以获取当前键的索引：

<div v-for="(value, key, index) in object">
  {{ key }} - {{ value }}
  // if index > 0, add comma
</div>

Answer 2

您可以在(key,value)循环中使用for对

var app = new Vue({
  el:'#app',
  data() {
  return {
    shoppingItems: [
      {name: 'apple', price: '10'},
      {name: 'orange', price: '12'}
    ]
  }
}
});

li span{
  text-transform: capitalize;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<ul>
  <li v-for="item in shoppingItems">
    <span v-for="(v,i,count) in item">{{i}} - {{v}}<span v-show="count<(Object.keys(item).length-1)
">, </span></span>
  </li>
</ul>
</div>

Answer 3

Object.Keys（Object）返回一个包含对象的所有键的数组。现在，您可以使用索引来获取愿望密钥-

<ul>
  <li v-for="item in shoppingItems">
    {{ Object.keys(item).indexOf(0) }} : {{ item.name }} - {{ Object.keys(item).indexOf(1) }} : {{ item.price }}
</li>
</ul>

Answer 4

让我们假设我们有一个包含人员对象<IfModule mod_rewrite.c> <IfModule mod_negotiation.c> Options -MultiViews </IfModule> RewriteEngine On # Redirect Trailing Slashes... RewriteRule ^(.*)/$ /$1 [L,R=301] # Handle Front Controller... RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.php [L] <IfModule mod_suphp.c> suPHP_ConfigPath /home/username/public_html/subfolder </IfModule> </IfModule> subfolder is the laravel project where I want to serve my application. php.ini file in my subfolder's root folder & for enable PHPFileinfo I write those code in php.ini file extension=fileinfo.so extension=pdo.so extension=pdo_mysql.so的人员数组或列表：

persons

现在让我们遍历人员列表并获取键，值和索引

[{name:'Suru', age:4, hairColor:'red'}, {name: 'Sofia', age:'5', hairColor:'green'}]

new Vue({
  el: '#app',
  data: {
    persons: [
      {name: 'Suru', age: 4, hairColor: 'red'},
      {name: 'Sofia', age: '5', hairColor: 'green'}
    ]
  }
});

在Vue.js迭代中打印密钥

4 个答案: