书架、记事本（vue）

<!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, init

暮鼓晨钟zzz

235人浏览 · 2021-07-19 14:42:22

暮鼓晨钟zzz · 2021-07-19 14:42:22 发布

<!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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^