lovecoding
/
VIP29


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板</title>
    <!-- 引入文件   -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .active {
            height: 200px;
            width: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">

    <h1>图书列表</h1>

    <table width="80%" cellspacing="10" cellpadding="0" >
        <tr>
            <th>图书编号</th>
            <th>图书名称</th>
            <th>图书价格</th>
            <th>图书作者</th>
            <th>数量</th>
            <th>操作</th>
        </tr>
        <tr v-for="(item, index) in books "  :key="item.id"  align="center"    >
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td>{{item.author}}</td>
            <td>
                <button @click="subBookCount(index)" >-</button>
                {{item.count}}
                <button @click="item.count++" >+</button>
            </td>
            <td>
                <button @click="delBooks(index)" >删除</button>
            </td>
        </tr>

        <h3>总价格：{{totalPrice}}</h3>
    </table>

</div>
</body>
<script>
    const { createApp, ref , computed  } = Vue;
    createApp({
        setup() {
            //数组
            let books = ref([
                {id: 1, name: '神墓', price: 129.0, author: '辰东',count:1},
                {id: 2, name: '斗破', price: 199.0, author: '土豆',count:1},
                {id: 3, name: '大主宰', price: 119, author: '土豆',count:1},
                {id: 4, name: '遮天', price: 99, author: '辰东',count:1},
                {id: 5, name: '吞噬星空', price: 188, author: '番茄',count:1},
                {id: 6, name: '凡人修仙传', price: 129, author: '耳根',count:1},
            ])

            // 一个计算属性 ref 总价格
            const totalPrice = computed(() => {
                let sumPrice = 0;

                for (let i = 0; i < books.value.length; i++) {

                    // console.log( (parseInt(books.value[i].count) * parseInt(books.value[i].price))) ;
                    // console.log(books.value[i].count)
                    // console.log(books.value[i].price)

                    sumPrice += (parseInt(books.value[i].count) * parseInt(books.value[i].price))
                }

                return sumPrice
            })

            function subBookCount(index){
                //console.log(index)
                if (books.value[index].count == 0){
                    books.value[index].count = 0;
                }else{
                    books.value[index].count--;
                }
            }

            function delBooks(index){

                //splice 实现替换 删除  增加
                let book = {id: 6, name: '灵龙', price: 129, author: '一画开天',count:1}
                /*
                    索引位置
                    删除的个数
                    替换的元素 添加的元素
                 */
                // 替换 books.value.splice(index,1,book)
                // 删除
                books.value.splice(index,1)

            }

            return {
                books,subBookCount,totalPrice,delBooks
            };
        }
    }).mount('#app'); //createApp创建对象 挂在到app
</script>
</html>