<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
</head>
<style>
? ? table {
? ? ? ? border-collapse: collapse;
? ? ? ? width: 600px;
? ? ? ? margin: 0 auto;
? ? ? ? text-align: center;
? ? }
? ? th,
? ? td {
? ? ? ? border: 1px red solid;
? ? ? ? height: 40px;
? ? }
? ? #num {
? ? ? ? text-align: center;
? ? }
? ? .number span {
? ? ? ? padding: 5px 10px;
? ? ? ? background-color: #eee;
? ? ? ? cursor: pointer;
? ? }
? ? .hh-enter-active {
? ? ? ? animation: slideInLeft .3s;
? ? }
? ? .hh-leave-active {
? ? ? ? animation: slideOutRight .3s;
? ? }
? ? #num p{
? ? ? ? font-size: 24px;
? ? }
</style>
<body>
? ? <div id="app">
? ? ? ? <table>
? ? ? ? ? ? <thead>
? ? ? ? ? ? ? ? <th></th>
? ? ? ? ? ? ? ? <th>名稱</th>
? ? ? ? ? ? ? ? <th>價格</th>
? ? ? ? ? ? ? ? <th>數(shù)量</th>
? ? ? ? ? ? ? ? <th>小計</th>
? ? ? ? ? ? ? ? <th>操作</th>
? ? ? ? ? ? </thead>
? ? ? ? ? ? <tbody>
? ? ? ? ? ? ? ? <transition-group name='hh'>
? ? ? ? ? ? ? ? <tr v-for="(item,index) in goods" :key='index'>
? ? ? ? ? ? ? ? ? ? <td>
? ? ? ? ? ? ? ? ? ? ? ? <input type="checkbox" @click='selectGood(item)' :checked='item.check'>
? ? ? ? ? ? ? ? ? ? </td>
? ? ? ? ? ? ? ? ? ? <td>{{item.title}}</td>
? ? ? ? ? ? ? ? ? ? <td>{{item.price | foDate }}</td>
? ? ? ? ? ? ? ? ? ? <td class="number">
? ? ? ? ? ? ? ? ? ? ? ? <span @click='changeNum(item,0)'>-</span>
? ? ? ? ? ? ? ? ? ? ? ? <input type="text" v-model='item.count'>
? ? ? ? ? ? ? ? ? ? ? ? <span @click='changeNum(item,1)'>+</span>
? ? ? ? ? ? ? ? ? ? </td>
? ? ? ? ? ? ? ? ? ? <td>{{item.price*item.count | foDate }}</td>
? ? ? ? ? ? ? ? ? ? <td>
? ? ? ? ? ? ? ? ? ? ? ? <input type="button" value="刪除" @click='del(index)'>
? ? ? ? ? ? ? ? ? ? </td>
? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? </transition-group>
? ? ? ? ? ? </tbody>
? ? ? ? </table>
? ? ? ? <div id="num">
? ? ? ? ? ? <input type="checkbox" @click='checkAll' :checked='allCheck'>
? ? ? ? ? ? <label for="" style="margin-right: 10px;">全選</label>
? ? ? ? ? ? <button style="margin-right: 10px;" @click='checkOtherAll'>反選</button>
? ? ? ? ? ? <button @click="delSelected" style="margin-right: 10px;" @click='checkOtherAll'>刪除全選</button>
? ? ? ? ? ? <p>已選擇:{{changed }}個</p>
? ? ? ? ? ? <p>總計:{{totalNum }}個</p>
? ? ? ? ? ? <p>總計:{{priceTotal | foDate }}</p>
? ? ? ? </div>
? ? </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
? ? Vue.filter('foDate', function (val) {
? ? ? ? return '￥' + val.toFixed(2)
? ? })
? ? var vm = new Vue({
? ? ? ? el: "#app",
? ? ? ? data: {
? ? ? ? ? ? goods: [
? ? ? ? ? ? ? ? { title: "上衣", price: 200, count: 1 },
? ? ? ? ? ? ? ? { title: "褲子", price: 100, count: 1 },
? ? ? ? ? ? ? ? { title: "鞋子", price: 500, count: 1 },
? ? ? ? ? ? ? ? { title: "風衣", price: 1000, count: 1 },
? ? ? ? ? ? ? ? { title: "帽子", price: 300, count: 1},
? ? ? ? ? ? ? ? { title: "西服", price: 2000, count: 1 },
? ? ? ? ? ? ]
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? ? //單選商品
? ? ? ? ? ? selectGood(item) {
? ? ? ? ? ? ? ? if (!item.check) {
? ? ? ? ? ? ? ? ? ? Vue.set(item, 'check', true)
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? item.check = !item.check;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? //加減數(shù)量
? ? ? ? ? ? changeNum(item, i) {
? ? ? ? ? ? ? ? // 加
? ? ? ? ? ? ? ? if (i == 0) {
? ? ? ? ? ? ? ? ? ? item.count--;
? ? ? ? ? ? ? ? ? ? if (item.count < 2) {
? ? ? ? ? ? ? ? ? ? ? ? item.count = 1;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? //減
? ? ? ? ? ? ? ? **} else {**
? ? ? ? ? ? ? ? ? ? item.count++;
? ? ? ? ? ? ? ? ? ? **if (item.count > 14) {**
? ? ? ? ? ? ? ? ? ? ? ? item.count = 15;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? //刪除一個
? ? ? ? ? ? del(index) {
? ? ? ? ? ? ? ? this.goods.splice(index, 1);
? ? ? ? ? ? },
? ? ? ? ? ? //刪除選中
? ? ? ? ? ? delSelected() {
? ? ? ? ? ? ? ? var abc = this.goods.filter((item, index) => {
? ? ? ? ? ? ? ? ? ? return item.check != true;
? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? this.goods = abc;
? ? ? ? ? ? },
? ? ? ? ? ? //全選
? ? ? ? ? ? checkAll() {
? ? ? ? ? ? ? ? this.flag = !this.flag;
? ? ? ? ? ? ? ? this.goods.forEach(item => {
? ? ? ? ? ? ? ? ? ? if (!item.check) {**
? ? ? ? ? ? ? ? ? ? ? ? Vue.set(item, 'check', true)
? ? ? ? ? ? ? ? ? ? } else {**
? ? ? ? ? ? ? ? ? ? ? ? item.check = !item.check;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? });**
? ? ? ? ? ? },
? ? ? ? ? ? //反選
? ? ? ? ? ? checkOtherAll() {
? ? ? ? ? ? ? ? this.goods.forEach(item => {
? ? ? ? ? ? ? ? ? ? if (!item.check) {
? ? ? ? ? ? ? ? ? ? ? ? Vue.set(item, 'check', true)
? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? item.check = !item.check;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? computed: {
? ? ? ? ? ? //監(jiān)聽全選按鈕是否應(yīng)該勾選，受單選的影響
? ? ? ? ? ? allCheck() {
? ? ? ? ? ? ? ? return this.goods.every(item => {
? ? ? ? ? ? ? ? **? ? return item.check == true
? ? ? ? ? ? ? ? })
? ? ? ? ? ? },
? ? ? ? ? ? //計算總價總價
? ? ? ? ? ? priceTotal() {
? ? ? ? ? ? ? ? var num = 0;
? ? ? ? ? ? ? ** this.goods.forEach(item => {
? ? ? ? ? ? ? ? ? ? if (item.check == true) {
? ? ? ? ? ? ? ? ? ? ? ? num += item.price * item.count
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? return num;
? ? ? ? ? ? },
? ? ? ? ? ? // 計算總數(shù)量
? ? ? ? ? ? totalNum() {
? ? ? ? ? ? ? ? var num = 0;
? ? ? ? ? ? ? ? this.goods.forEach(item => {
? ? ? ? ? ? ? ? ? ? num += item.count
? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? return num;
? ? ? ? ? ? },
? ? ? ? ? ? // 計算已選數(shù)量
? ? ? ? ? ? changed() {
? ? ? ? ? ? ? ? var num = 0;**
? ? ? ? ? ? ? ? this.goods.forEach(item => {
? ? ? ? ? ? ? ? ? ? if (item.check == true) {
? ? ? ? ? ? ? **? ? ? ? ? num += item.count
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? return num;
? ? ? ? ? ? }
? ? ? ? }
? ? })
</script>
</html>摘抄于：https://www.cnblogs.com/piaoyi1997/p/13368463.html
