1.2 vue-v-for和methods的用法 

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="js/vue.js"></script>
</head>

<body>
	<div id="app">
		<h1>{{title}}</h1>
		<ul>
			<li v-for="(food, index) in foods">
				菜名：{{food.name}}，数量：
				<button @click="cut(food)">-</button>

				<span v-if="food.num>0">{{food.num}}</span>
				<span v-else>未选择</span>

				<button @click="add(food)">+</button>

				<button @click='del(index)'>删除</button>
			</li>
		</ul>
	</div>
	<script>
		console.dir(Vue);
		const vm = new Vue({
			el: '#app',
			data: {
				title: '点个菜',
				foods: [
					{ name: '红烧肉', num: 0 },
					{ name: '大盘鸡', num: 0 },
					{ name: '水煮鱼', num: 0 },
				]
			},
			methods:{
				add(food){
					food.num++;
				},
				cut(food){
					food.num--;
				},
				del(i){
					this.foods.splice(i,1);
				}
			}
		});
	</script>
</body>

</html>

　　

posted @ 2021-12-20 17:13  JavaShop  阅读(114)  评论(0)    收藏  举报