直播商城源码，vue制作简易的购物车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue3.0.js"></script> //引入vue.js包
<style>
body {
width: 600px;
}
table {
border: 1px solid black;
}
table {
width: 100%;
}
th {
height: 50px;
}
th, td {
border-bottom: 1px solid #ddd;
text-align: center;
}
span {
float: right;
}
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<table>
<tr>
<th>商品号</th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>金额</th>
<th>操作</th>
</tr>
<tr v-for='(book,index) in books' :key="book.id">
<td>{
{
book.id}}</td>
<td>{
{
book.title}}</td>
<td>{
{
book.price}}</td>
<td>
<button :disabled="book.count===0" @click="book.count--">-</button>
{
{
book.count}}
<button @click="book.count++">+</button>
</td>
<td>{
{
itemprice(book.price,book.count)}}</td>
<td><button @click="deleteitem(index)">删除</button></td>
</tr>
</table>
<p>总价：￥{
{
totalprice}}</p>
</div>
<script>
//vue3.0语法
const vm=Vue.createApp({
data(){
return{
books:[{
id: 1,
title: 'Java无难事',
price: 188,
count: 1
},
{
id: 2,
title: 'C++深入详解',
price: 168,
count: 1
},
{
id: 3,
title: 'Servlet/JSP深入详解',
price: 139,
count: 1
}]
}
},
methods:{
itemprice(price,count){
return price*count;
},
deleteitem(index){
this.books.splice(index,1);
}
},
computed:{
totalprice(){
let total=0;
for(let book of this.books)
{
total+=book.price*book.count;
}
return total;
}
}
}).mount("#app");
</script>
</body>
</html>
以上就是 直播商城源码，vue制作简易的购物车，更多内容欢迎关注之后的文章