vue 学习笔记 part-2->指令v-for

最新推荐文章于 2025-09-10 16:16:57 发布

转载最新推荐文章于 2025-09-10 16:16:57 发布 · 73 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/zjllovecode/blog/1595185

文章标签：

#javascript #python #ViewUI

2019独角兽企业重金招聘Python工程师标准>>>

HTML:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <ul>
        <li v-for="food in foodList">{{food.name}}: ￥ {{food.discount? 
            food.price*food.discount : food.price}}</li>
    </ul>
</div>
</body>
<script src="../lib/vue.js"></script>
<script src="js/part-2.js"></script>
</html>

JS:

var app = new Vue({
    el:'ul',
    data:{
        foodList:[
            {
                name:'葱',
                price:4.5,
                discount: .8,
            },
            {
                name:'姜',
                price:10,
                discount: .5,
            },
            {
                name:'蒜',
                price:7.5,
            }
        ]
    }
});

效果展示