书架、记事本（vue）

最新推荐文章于 2024-05-20 09:35:43 发布

暮鼓晨钟zzz

最新推荐文章于 2024-05-20 09:35:43 发布

阅读量214

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_42546585/article/details/118895653

版权

笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Vue.js构建一个简单的书籍管理系统，可以实现实时添加、删除书籍并清空列表。通过v-model双向数据绑定和methods中的方法，实现了输入框添加书籍、点击删除指定书籍以及清除所有书籍的功能。

摘要由CSDN通过智能技术生成

<!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">
    <script src="https://unpkg.com/vue@next"></script>
    <title>Document</title>
    <style>
        .dot{
            list-style-type: none;
            margin-left: -30px;
            padding-left: 0px;
        }
        .content{
            display: inline-block;
        }
        /* .clear{
            float: left;
        } */
    </style>
    <!-- js代码 -->
    <script>
        window.onload = function (){
            const app = {
                data(){
                    return{
                        booksArry:['红楼','水浒','三国'],
                        msg:'',
                        isShow:false
                    }
                },
                methods:{
                    addBooks(){
                        this.booksArry.push(this.msg)
                    },
                    removeBooks(x){
                        console.log('点我')
                        console.log(x)
                        this.booksArry.splice(x,1)
                    },
                    clearAll(){
                        this.booksArry.splice(0,this.booksArry.length)
                    },
                    btnShow(){
                        this.isShow = !this.isShow
                    }
                }
            }
        Vue.createApp(app).mount('#app')
        }
    </script>
</head>
<body>
    <!-- 搭建html结构 -->
    
    <div id="app">
        <div class="head">
            <input type="text" v-model = 'msg' @keydown.enter = 'addBooks'>
        </div>
        <div class="body">
            <div class="container">
                <ul>
                    <li class="dot" v-for = '(book,index) in booksArry'>
                        <span class="num">{{index+'.我第'+(index+1)+'喜欢看'}}</span>
                        <div class="content" >{{book}}</div>
                        <button class="delete" @click = 'removeBooks(index)' v-show ='isShow' @hover ='btnShow'>×</button>
                    </li>
                </ul>
            </div>
        </div>
        <div class="foot" v-if = 'booksArry.length > 0'>
            <div class="count">
                当前一共喜欢{{booksArry.length}}本书
            </div>
            <button class="clear" @click = 'clearAll'>clear</button>
        </div>
    </div>
</body>
</html>