Vue.js的列表渲染v-for數(shù)組對象子組件

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 20:01:09

Vue.js的列表渲染v-for數(shù)組對象子組件

Vue.js的列表渲染v-for數(shù)組對象子組件:這次給大家?guī)鞻ue.js的列表渲染 v-for 數(shù)組對象子組件，使用Vue.js的列表渲染 v-for 數(shù)組對象子組件的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。v-for(數(shù)組)<template> <p id="myapp"> <

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀Vue.js的列表渲染v-for數(shù)組對象子組件:這次給大家?guī)鞻ue.js的列表渲染 v-for 數(shù)組對象子組件，使用Vue.js的列表渲染 v-for 數(shù)組對象子組件的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。v-for(數(shù)組)<template> <p id="myapp"> <

這次給大家?guī)鞻ue.js的列表渲染 v-for 數(shù)組對象子組件，使用Vue.js的列表渲染 v-for 數(shù)組對象子組件的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。

v-for(數(shù)組)

<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>
 <!--帶序號 并且給奇數(shù)行添加一個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>

執(zhí)行結(jié)果:

v-for(對象) 獲取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>

執(zhí)行結(jié)果:

v-for(子組件)

先創(chuàng)建一個a組件

代碼a.vue代碼如下:

<template>
 <p class="hello">
 {{ hello }} </p></template><script>
 export default {
 data () { return { hello: 'I am componnet a'
 }
 }
 }</script>

在MyApp.vue中調(diào)用

<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>

執(zhí)行結(jié)果: