<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<h1>水果列表</h1>
<div id="app">
<form @submit.prevent='sub_data'>
<input type="text" v-model.trim='name'>
<input v-model.number = 'price'>
<button>添加</button>
</form>
<ul>
<li v-for='tem,index in list'>
名称：{{tem.name}};
单价：{{tem.price}};
数量：
<button @click='decrease(index)'>-</button>
{{tem.count}}
<button @click='increase(index)'>+</button>
</li>
</ul>
<h1>总价：{{totalprice}}</h1>
</div>
<script>
const msg_data = {
data(){
return {
name:'',
price:0,
count:1,
list:[{name:'hu',price:0,count:2}]
}
},
computed:{
totalprice(){
let sum = 0;
this.list.forEach( v => {
sum += (v.price * v.count);
})
return sum
}
},
methods:{
sub_data(){
this.list.push(
{name:this.name,
price:this.price,
count:1
})
},
decrease(i) {
if(this.list[i].count<=0 && confirm('是否删除')){
this.list.splice(i,1)
}
this.list[i].count --
},
increase(i) {
this.list[i].count ++
}
}
}
Vue.createApp(msg_data).mount('#app')
</script>
</body>
</html>
|