Vue.js

Vue.js 学习笔记 3

常用语法

v-for

v-for的作用格式迭代，在html中li元素中定义个v-for的属性如：
表示在foodList中迭代输出food，代码如下

html:

<div id="app">
    <ul>
        <!-- v-for是一种迭代 -->
        <!-- <li v-for="food in foodList">
            {{food}}
        </li> -->
        <li v-for="food in foodList">
            {{food.name}}:￥{{food.price*food.discount}}
        </li>
    </ul>
</div>

js:

var app = new Vue({
    el:"#app",//绑定对应元素
    data:{    //数据键值对
        // foodList:['bread','egg','carrot'],
        foodList:[
            {
                name:'bread',
                price:2.99,
                discount:2,
            },
            {
                name:'egg',
                price:0.5,
                discount:0.5,
            },
            {
                name:'carrot',
                price:1.99,
                discount:0,
            }
        ]
    }
})