組件 for 迴圈數組

標籤：meta   asc   全域   color   tle   utf-8   text   code   set   

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <div id="app">      <!--   <ol>            <li v-for="item in groceryList">                {{item.text}}            </li>        </ol> -->    <!--上面的代碼ol和下面的ol可達到同樣的效果-->        <ol>            <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>         </ol>    </div></body><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">    Vue.component(‘todo-item‘,{  //  註冊一個全域群組件        props: [‘todo‘],   //使用 props 傳輸資料予子組件  通過todo傳輸        template: ‘<li>{{todo.name}}{{todo.age}}{{todo.sex}}</li>‘   // 建立個模型    })var app1= new Vue({  //建立一個 Vue 執行個體：    el: ‘#app‘,    data: {        groceryList: [            {name:‘張三‘},            {age:22},            {sex:‘女‘}        ]    }})    </script></html>

 

組件 for 迴圈數組