This time I bring you Vue.js list rendering v-for array object subcomponent, use Vue.js list rendering v-for array object subcomponent NotesWhat are the following? Let’s take a look at the actual cases.
v-for(array)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <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>
|
Copy after login
Execution result:
##v-for(object) Get key - value
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <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>
|
Copy after login
Execution result:
v-for (subcomponent)
Create a component a first
Code a.vue The code is as follows:
1 2 3 4 5 6 7 8 | <template>
<p class = "hello" >
{{ hello }} </p></template><script>
export default {
data () { return { hello: 'I am componnet a'
}
}
}</script>
|
Copy after login
Call
1 2 3 4 5 6 7 8 9 10 11 | <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>
|
Copy after login
in MyApp.vue. Execution result:
## I believe you have mastered it after reading the case in this article. Method, for more exciting information, please pay attention to php Chinese website
Other
related articles! Recommended reading:
What are the precautions when using Vue.js
In-depth advanced application of DOM in JavaScript
The above is the detailed content of Vue.js list rendering v-for array object subcomponent. For more information, please follow other related articles on the PHP Chinese website!