![like]( "like")
本文介绍了Vue.js 迭代中的打印键的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有如下数组
data() {返回 {购物项目:[{名称:'苹果'，价格:'10'}，{名称:'橙色'，价格:'12'}]}}
我正在尝试像下面这样迭代
<li v-for="shoppingItems 中的项目">{{ item.name }} - {{ item.price }}
我得到如下输出
但我想得到如下输出
- name - apple, price - 10//我想动态打印key
- 名称 - 橙色，价格 - 12
解决方案
你可以在for循环中使用(key,value)对
var app = new Vue({el:'#app',数据() {返回 {购物项目:[{名称:'苹果'，价格:'10'}，{名称:'橙色'，价格:'12'}]}}});
li span{文本转换:大写；}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script><div id="应用程序"><ul><li v-for="shoppingItems 中的项目"><span v-for="(v,i,count) in item">{{i}} - {{v}}<span v-show="count<(Object.keys(item).length-1)">, </span></span>
I have array like below
data() {
return {
shoppingItems: [
{name: 'apple', price: '10'},
{name: 'orange', price: '12'}
]
}
}
I am trying to iterate like below
<ul>
<li v-for="item in shoppingItems">
{{ item.name }} - {{ item.price }}
</li>
</ul>
I am getting output like below
But I would like to get output like below
- name - apple, price - 10 //I would like to print key dynamically
- name - orange, price - 12
解决方案
You can use (key,value) pair in for loop
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>
这篇关于Vue.js 迭代中的打印键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！