购物车
页面代码(html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<script type="application/javascript" src="js/jq.js"></script>
<script type="application/javascript" src="vue.js"></script>
<style>
.goods_img{
width:15%;
height:15%;
}
ol li{
margin-bottom:15px;
}
.number{
color:red;
}
.myinput{
width:30px;
}
</style>
</head>
<body>
<div id="app">
<h3>购物车列表</h3>
<hr/>
<ol>
<li v-for="(item,index) in productList">
<input type="checkbox" v-model="item.checked" @click="selOne(item)"/>
图标:<img class="goods_img" :src="item.productImage"/>
名称:<span>{
{item.productName}}</span>
单价:<span class="number">{
{item.productPrice | filterMoney}}</span>
数量:<button @click="diJian(item)">-</button>
<input class="myinput" type="text" v-model="item.productQuentity"/>
<button @click="item.productQuentity+=1">+</button>
合计:<span class="number">{
{item.productPrice*item.productQuentity|filterMoney}}</span>
<button @click="deleteOne(index)">删除</button>
</li>
</ol>
<hr/>
<input type="checkbox" v-model="selALLFlag" @click="selALL(true)"/> 全选
<button @click="selALL(false)"> 取消全选 </button>
<button @click="deleteSel"> 批量删除 </button>
总费用:<span class="nu