用 Vue.js 写了一个计数器例子

用 Vue.js 写了 一个计数器的例子,功能是:通过两个按钮来实现加减操作,另一个 span 显示当前数值。还有一个输入框来限定最大值,如果超过最大值就在网页的右上角提示。

效果如下

代码分享

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 计数器实例</title>
    <script src="./lib/fontawesome.js"></script>
    <!-- 自定义样式 -->
    <style>
        html,
        body {
            max-height: 100%;
            height: 100%;
        }
        body{
            margin: 0;
            padding: 0;
            background-color: #FFFF80;
            font-size: 14px;
            
        }
        button:focus {
            outline: none;
        }
        button:hover {
            background: rgba(79, 185, 255, 0.856);
            color: white;
        }
        button:active {
            background: rgb(79, 185, 255);
            color: white;
        }
        #app{
            width: 65%;
            height: 100%;
            display: grid;
            grid-template-columns: 1fr;
            justify-content: center;
            align-content: center;
            place-items: center;
            gap: 16px;
            margin: 0 auto;
        }
        .item {
            border-radius: 10px;
            background-color: white;
            padding: 20px;

        }
        
        .max-value-wrap {
            text-align: center;
            padding: 12px;
        }
        .max-value {
            margin-left: 10px;
            padding: 4px
        }
        .control-wrap {
            display: grid;
            height: 50px;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 40px;
            align-content: center;
        }
        .btn {
            font-size: 1.25rem;
            border: 0;
        }
        .number {
            background: rgba(204, 136, 136, 0.548);
            text-align: center;
            line-height: 40px;
        }

        #message {
            position: absolute;
            right: 0;
            top: 0;
            padding: 15px;
            background: rgba(209, 10, 59, 0.897);
            color: white;
            font-size: 2rem;
        }

        @media (max-width: 576px){
        	#app {
        		width: 95%;
        	}
        	#app .item {
        		justify-self: stretch;
        	}
        }
    </style>
</head>

<body>
    <!-- id="app" -->
    <div id="app">
        <div class="item">
            <div class="max-value-wrap">
                <span>最大值</span>
                <input type="text" class="max-value" v-model="number_max">
            </div>
            <div class="control-wrap">
                <button class="btn" @click="subtract">-</button>
                <span class="number" v-text="number">0</span>
                <button class="btn" @click="add">+</button>
            </div>
        </div>
        <div id="message" v-if="messageSwitch">{{ message }}</div>
    </div>
    <!-- / id="app" -->

    <script src="./lib/vue.js"></script>
    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                number: 0,
                number_max: 5,
                messageSwitch: false,
                message: ''
            },
            methods: {
                add() {
                    console.log("++")
                    if (!(this.number >= this.number_max)) {
                        this.number++
                    } else {
                        this.messageSwitch = true
                        this.message = "计数不能大于 " + this.number_max
                        setTimeout(() => {
                            this.messageSwitch = false
                        }, 1000)
                        console.log(this.messageSwitch)
                        console.log(this.message)
                    }
                },
                subtract() {
                    if (!(this.number <= 0)) {
                        this.number--
                    }
                }
            },
        })
    </script>
</body>

</html>

暂无评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注