2018-09-10第一节vue

v-for循环
1,用vue输出内容

<div id=“abc”>
{{msg}}
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script>
            new Vue({
                el:'#adc',   //element元素
                data:{   //写数据
                    msg:'hello 123456789',
 }
 }）
</script>

2，用v-for循环数组或对象

<div id="adc">
            {{msg}}
            <ul>
                <li v-for="v in arr">{{v}}</li>
            </ul>
            <ul>
                <li v-for="(ab,index) in obj">{{index}}-{{ab}}</li>
            </ul>
</div>
<script type="text/javascript" src="js/vue.js"></script>
        <script>
            new Vue({
                el:'#adc',
                data:{
                    msg:'hello 123456789',
                    arr:[1,2,3],
                    obj:{name:'adc',age:18},
}
})
</script>

3,用v-for循环输出数组对象

<div id="adc">
<ul>
                <li v-for="(cai,index) in arrs">{{cai.num}}{{cai.name}}{{cai.price}}</li>
            </ul>
            <table border="1" cellspacing="0">
                <tr>
                    <th>顺序</th>
                    <th>菜名</th>
                    <th>价格</th>
                </tr>
                <tr v-for="cai in arrs">
                <td>{{index+1}}</td>
                <td>{{cai.name}}</td>
                <td>{{cai.price}}</td>
                </tr>
            </table>
        </div>
</script>
<script type="text/javascript" src="js/vue.js"></script>
        <script>
            new Vue({
                el:'#adc',
                data:{
                    arrs:[
                    {name:'铁板孙金城',price:60},
                    {name:'红烧孙金城',price:98},
                    {name:'脆皮孙金城',price:54},
                    {name:'凉拌孙金城',price:12},
                    {name:'清蒸孙金城',price:52},
                    {name:'油炸孙金城',price:49},
                    { name:'大饼卷孙金城',price:34}
                    
                    ]
                }
            })
        </script>