v-for指令

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    <ul>

        <li v-for="food in foodList">

            {{food.name}}:￥{{food.discount ? food.price*food.discount : food.price }}

        </li>

    </ul>

</div>

<script src="../lib/vue.js"></script>

<script src="js/main.js"></script>

</body>

</html>

var app = new Vue({

    el:"#app",

    data:{

        // foodList:["葱","姜","蒜"],

        foodList:[

            {

                name:"葱",

                price:10,

                discount:.8

            },

            {

                name:"姜",

                price:8,

                discount:.6

            },

            {

                name:"蒜",

                price:6,

            }

        ]

    }

})

巴特西

v-for指令

最新文章

热门文章