1. html 页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>v-for迭代指令</h2>
<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/01.js"></script>
</body>
</html>
2.js 代码
var app = new Vue({
el: '#app' , //作用在id为app 的组件
data: {
foodList: [
{
name: '葱',
price: 10,
discount: .2,
},
{
name: '姜',
price: 12,
discount: .5,
},
{
name: '蒜',
price: 5
}
]
}
});
3. 效果图
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于