<!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="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<style>
table,tr,th,td{
border: 1px solid black;
}
table{
border-collapse: collapse;
}
td,th{
padding: 10px;
}
</style>
<body>
<!-- v-for指令使用场景:凡是出现重复性的内容/标签时,就可以用v-for指令实现 -->
<div id="app">
<table>
<tr>
<th v-for="item,index in title" :key="index">{{item}}</th>
</tr>
<tr v-for="item,index in books">
<td>{{index}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>¥{{item.price}}.00</td>
<td>
<button @click="addMin(index,-1)">-</button>
{{item.num}}
<button @click="addMin(index,1)">+</button>
</td>
<td>
<button @click="del(index)">移除</button>
</td>
</tr>
<tr>
<td colspan="6" style="text-align: right;">总价为:{{total}}</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el:'#app',
// data 里面定义的是静态变量
data:{
title:['编号','书籍名称','出版日期','价格','数量','操作'],
books:[
{
name:'算法导论',
date:'2006-9',
price:85,
num:1
},
{
name:'UNIX编程艺术',
date:'2006-9',
price:85,
num:1
},
{
name:'Vue程序设计',
date:'2006-9',
price:85,
num:1
}
]
},
// methods 里面定义的是方法、函数
methods:{
// 加减功能
addMin(i,val){
if(val == -1 && this.books[i].num == 1){
return
}
this.books[i].num +=val
},
// 移除功能
del(i){
// 首先将要移除具体哪一项元素的索引值告诉del这个方法,使用i接收
this.books.splice(i,1)
}
},
// computed :假设一个值会因为其他的变化而变化,则定义在这里
computed:{
total(){
var ret = this.books.reduce((pre,item)=>{
// pre 表示的是上次的结果
// item 表示的是每一项元素
// 第一次遍历:0 +85 * 1 = 85(这个85赋值给下一次遍历的pre)
// 第二次遍历:85 + 85 * 1 = 170
// 第三次遍历:170 + 85 * 1 = 255
// 最终结果是:255,这个值赋值给:ret
return pre + item.price * item.num
},0)
// 要把ret暴露到外面去,才可以直接调用这方法
// 想要什么结果,就 return 什么样子,xx.toFixed(2)表示保留两位小数点
return "¥"+ret.toFixed(2)
}
}
})
</script>
</html>
Vue 实现购物车案例
于 2024-05-20 21:20:15 首次发布