Vue.js的列表渲染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>

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

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

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