Vue.js的列表渲染v-for数组对象子组件

来源：宝岛财富

这次给大家带来Vue.js的列表渲染 v-for 数组对象子组件，使用Vue.js的列表渲染 v-for 数组对象子组件的注意事项有哪些，下面就是实战案例，一起来看一下。

v-for(数组)

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

执行结果:

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>

执行结果:

v-for(子组件)

先创建一个a组件

代码a.vue代码如下:

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

在MyApp.vue中调用

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

执行结果:

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

全部频道

Vue.js的列表渲染v-for数组对象子组件