Vue中的for循環方法，添加，點擊事件

    <div id="app">
        <ul>
            <li v-for="p in persons" v-on:click="itemShow(p)">主鍵：{{p.id}} 姓名：{{p.name}} 年齡：{{p.age}}</li>
        </ul>
        主鍵：<input type="text" v-model="newId">
        姓名：<input type="text" v-model="newName">
        年齡：<input type="text" v-model="newAge">
        <input type="button" v-on:click="AddNew" value="添加" />
        <br /><br /><br />
        <ul>
            <li v-for="(item,index) in listnews" :key="index">
                {{item.cate}}
                <ol>
                    <li v-for="(i,k) in item.list" key="k">
                        {{i.title}}
                    </li>
                </ol>
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        var vue = new Vue({
            el: "#app",
            data: {
                newId:'',newName:'',newAge:'',
                persons: [
                    { id: 3, name: "yu", age: "18" },
                    { id: 4, name: "shui", age: "58" },
                    { id: 6, name: "cai", age: "88" }
                ],
                listnews: [{
                    cate: "國內新聞",
                    list: [
                        {
                            title: "國內新聞11"
                        },
                        {
                            title: "國內新聞22"
                        },
                        {
                            title: "國內新聞33"
                        }
                     ]
                    },
                    {
                        cate: "國際新聞",
                        list: [
                            {
                                title: "國際新聞11"
                            },
                            {
                                title: "國際新聞22"
                            },
                            {
                                title: "國際新聞33"
                            }
                        ]
                    }
                ]
            },
            methods: {
                AddNew: function () {
                    this.persons.push({ id: this.newId, name: this.newName, age: this.newAge })
                },
                itemShow:function(p){
                    alert(p.name);
                }
            }

            })
    </script>

 

運行圖：