Dieses Mal bringe ich Ihnen die Vue.js-Listenrendering-V-für-Array Objekt-Unterkomponente unter Verwendung der Vue.js-Listenrendering-V-für-Array-Objekt-Unterkomponente Hinweise Was sind die folgenden? Werfen wir einen Blick auf tatsächliche Fälle.
v-for (array)
<template>
<p id="myapp">
<!--普通-->
<ul>
<li v-for="item in list">
{{item.name}} - {{item.price}} </li>
</ul>
<hr>
<!--v-text-->
<ul>
<li v-for="item in list" v-text="item.name + ' - ' + item.price"></li>
</ul>
<hr>
<!--带序号 并且给奇数行添加一个class=add-->
<ul>
<li v-for="(item,index) in list" :class="{add:index % 2}">
{{item.name}} - {{item.price}} - {{index}} </li>
</ul>
</p></template><script>
export default { data: function () { return { list: [
{ name: 'apple', price: 34
},
{ name: 'banana', price: 56
}
]
}
}
}</script>Ausführungsergebnis:
v-for (object) Get key - value
<template>
<p id="myapp">
<!--v-for 对象-->
<!--只获取value-->
<ul>
<li v-for="value in objList">
{{value}} </li>
</ul>
<!--获取key -value-->
<ul>
<li v-for="(value, key) in objList">
{{key}} - {{value}} </li>
</ul>
</p></template><script>
export default { data: function () { return { objList: { name: 'apple', price: 34, color: 'red', weight: 14
}
}
}
}</script>Ausführungsergebnis:
v-for (Unterkomponente)
Erstellen Sie zunächst eine a-Komponente
Code a.vue lautet wie folgt:
<template>
<p class="hello">
{{ hello }} </p></template><script>
export default {
data () { return { hello: 'I am componnet a'
}
}
}</script>Aufruf
<template>
<p id="myapp">
<componentA v-for="(value, key) in objList"></componentA>
</p></template><script>
import componentA from './components/a.vue'
export default {// 注册组件
components: {componentA}, data: function () { return { objList: { name: 'apple', price: 34, color: 'red', weight: 14
}
}
}
}</script>in MyApp.vue Ausführungsergebnis:
Glauben Sie es Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Was sind die Vorsichtsmaßnahmen für die Verwendung von Vue.js?
Ausführliche erweiterte Anwendung von DOM in JavaScript
Das obige ist der detaillierte Inhalt vonVue.js listet die V-for-Array-Objekt-Unterkomponente auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
