代码之家 › 专栏 › 技术社区 › abu abu

在vue.js迭代中打印密钥

vue.js

abu abu · 技术社区 · 6 年前

我有下面这样的数组

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

但我想得到如下输出

name-apple,price-10//i想动态打印密钥
名称-橙色,价格-12

3 回复 | 直到 6 年前

Niklesh Raut 6 年前

你可以用 (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>

Thoomas 6 年前

您可以使用 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>

santanu bera 6 年前

keys(object)返回一个包含该对象所有键的数组。现在可以使用index来获取desire键-

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

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

2 年前