lovecoding
/
VIP29


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
							<!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>  <!-- 下架  单选框 -->
            <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>{{item.type}}</td>
            <td>{{item.flag}}</td>
            <td>{{item.labelstr}}</td>
            <td>{{item.desc}}</td>

            <td>
                <button @click="subBookCount(index)" >-</button>
                {{item.count}}
                <button @click="item.count++" >+</button>
            </td>
            <td>
                <button @click="delBooks(index)" >删除</button>
            </td>
        </tr>

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

    编号 <input  v-model="bookForm.id" type="text" placeholder="id" >
    <br>
    书名：<input  v-model="bookForm.name" type="text" placeholder="书名" >
    <br>
    价格： <input  v-model="bookForm.price" type="text" placeholder="价格" >
    <br>
    作者： <input  v-model="bookForm.author" type="text" placeholder="作者" >
    <br>
    类型：
    <select v-model="bookForm.type" >
        <option value="0" >---请选择---</option>
        <option value="玄幻" >玄幻</option>
        <option value="武侠" >武侠</option>
        <option value="修仙" >修仙</option>
    </select>
    <br>
    是否下架：
    <input type="radio" value="是" v-model="bookForm.flag" name="flag" > 是
    <input type="radio" value="否" v-model="bookForm.flag" name="flag" > 否
    <br>
    标签：
    <input type="checkbox" value="热血" v-model="bookForm.label" name="label" > 热血
    <input type="checkbox" value="西方" v-model="bookForm.label" name="label" > 西方
    <input type="checkbox" value="魔幻" v-model="bookForm.label" name="label" > 魔幻
    <input type="checkbox" value="现代" v-model="bookForm.label" name="label" > 现代
    <input type="checkbox" value="神话" v-model="bookForm.label" name="label" > 神话

    <br>
    介绍
    <textarea v-model="bookForm.desc" cols="30" rows="10" ></textarea>
    <hr>
    <button  @click="addBook" > 添加 </button>

</div>
</body>
<script>
    const { createApp, ref , computed ,watch ,onMounted ,onUpdated } = Vue;
    createApp({
        setup() {
            //数组
            let books = ref([
                {id: 1, name: '神墓', price: 129.0, author: '辰东',type: '玄幻',flag:'是', labelstr:"西方, 魔神", desc:"神魔陵园除了安葬着人类历代的最强者", count:1},
                {id: 2, name: '斗破', price: 199.0, author: '土豆',type: '玄幻',flag:'是', labelstr:"西方, 魔神" ,desc:"神魔陵园除了安葬着人类历代的最强者", count:1},
                {id: 3, name: '大主宰', price: 119, author: '土豆',type: '玄幻',flag:'是', labelstr:"西方, 魔神" , desc:"神魔陵园除了安葬着人类历代的最强者", count:1},
            ])


            let idAuto = computed( ()=>{
                return books.value.length+1;
            })

            //form 数据
            let bookDefaultForm = {
                id: idAuto,
                name: '',
                price: 0,
                author: '',
                type: '0',
                flag: '是',
                label: ['西方'],
                desc: '',
                count: 1            //编号
            }

            //表单
            let bookForm = ref({...bookDefaultForm})

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

                for (let i = 0; i < books.value.length; i++) {
                    sumPrice += (parseInt(books.value[i].count) * parseInt(books.value[i].price))
                }

                return sumPrice
            })

            //添加
            function addBook(){

                //处理标签 展示string
                //join 把数组 通过逗号 拼接成字符串
                bookForm.value.labelstr = bookForm.value.label.join(",")

                //bookForm 添加到数组
                books.value.push({...bookForm.value})

                //清空
                bookForm.value = {...bookDefaultForm}

            }

            //删除
            function delBook(index){
                books.value.splice(index, 1)
            }


            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)
            }
            return {
                books,subBookCount,totalPrice,delBooks,bookForm,addBook
            };
        }
    }).mount('#app'); //createApp创建对象 挂在到app
</script>
</html>