vue内置指令

作者: 西兰花伟大炮 | 来源:发表于2017-11-18 17:58 被阅读4次

（1）v-for

遍历数据渲染到无序列表

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="box">
             <ul v-for="(food,index) in foodlist">
                <li> {{index}} 类名:{{food.name}},价格:{{food.price}}</li>
             </ul>
            
        </div>
    </body>
    <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.3/vue.min.js"></script>
    <script>
        new Vue({
            el:"#box",
            data:{
                foodlist:[
                    {name:"排骨",price:"38"},
                    {name:"草鱼",price:"25"},
                    {name:"猪脚",price:"55"},
                    {name:"鸡蛋",price:"20"}
                ]
            }
           
        });
    </script>
</html>

image.png