SOURCE

new Vue({
    el:"#app",
    data:{
       show:true, 
       ingredients:['apple','banana','peach'],
       books:[
           {title:'Lord of Rings',author:'J.R.R',book:3}
           ],
       mybooks:{
           title:'Lord of Rings',
           author:'J.R.R',
           book:3
       },
       peo:{
           name:'zhenghaiyan',
           age:'24',
           children:['xiaofengfeng','xiaoyanyan']
       }   
    }
})

<div id="app">
    <div>
        <!--通过button显示与非现实下面两句话-->
        <button @click="show=!show">Toggle</button>
        <p v-if="show">You either see me ...</p>
        <p v-else>... or me</p>
    </div>
    <div>
        <ul>
            <li v-for="ingredient in ingredients">{{ingredient}}</li>
        </ul>
    </div>
    <div>
        <ul>
            <li v-for="(value,key,index) in mybooks">
                 {{key}}:{{value}}({{index}})
            </li>
        </ul>
    </div>
    <!--
    <div>
        <ul>
            <li v-for="book in books">
                <div v-for="(value,key,index) in book">
                    {{key}}:{{value}}({{index}})
                </div>
            </li>
        </ul>
    </div>
    -->
    <div>
        <ul>
            <li v-for="(peos,key) in peo">
                <template v-if="Array.isArray(peos)">
                    <div v-for="elements in peos">
                       {{key}} :{{elements}}
                    </div>
                </template>
                <template v-else>
                    {{key}}:{{peos}}
                </template>
            </li>
        </ul>
    </div>
</div>