vue中的按鈕綁定事件小案例

更新時間：2023年11月15日 09:47:20 作者：戰(zhàn)斗中的老段

這篇文章主要介紹了vue中的按鈕綁定事件小案例,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue按鈕綁定事件

效果圖

第一步：寫一個大盒子

第二步：寫一個div；里邊綁定一個class樣式

第三步：寫位置樣式

第四步：data給綁定class設(shè)置一個初始值

第五步：寫按鈕

第六步：給樣式設(shè)置一個初始值

第七步：綁定點擊事件并判斷樣式

<!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">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
        /* 第二步寫4個樣式 */
        .d1 {
            /* translate根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù)，從當(dāng)前元素位置移動。 */
            transform: translate(0, 0);
        }

        .d2 {
            /* translate根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù)，從當(dāng)前元素位置移動。 */
            transform: translate(200px, 0);
        }

        .d3 {
            /* translate根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù)，從當(dāng)前元素位置移動。 */
            transform: translate(200px, 200px);
        }

        .d4 {
            /* translate根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù)，從當(dāng)前元素位置移動。 */
            transform: translate(0, 200px);
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 第一步： 在容器里邊寫一個盒子；綁定一個樣式 -->
        <div id="box" :class="postionClass">

        </div>
        <!-- 第四步：寫一個點擊事件 -->
        <button @click="toggle">點擊切換</button>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            // 第三步 ： 樣式設(shè)置默認(rèn)值
            data: {
                postionClass: 'd1',
                // 第六步設(shè)定index初始值為1；從d1 d2 d3 d4后邊這個1
                index: 1
            },
            methods: {
                // 第五步：綁定點擊事件
                toggle() {
                    // 第八步： 判斷index不能大于4，返回1；否則的話返回的是index+1
                    this.index = this.index + 1 > 4 ? 1 : this.index + 1;
                    // 第七步：點擊
                    this.postionClass = 'd' + this.index
                }
            }
        })
    </script>
</body>

</html>

用computed優(yōu)化一下代碼

<!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">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
        /* 第二步寫4個樣式 */
        .d1 {
            /* translate根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù)，從當(dāng)前元素位置移動。 */
            transform: translate(0, 0);
        }

        .d2 {
            /* translate根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù)，從當(dāng)前元素位置移動。 */
            transform: translate(200px, 0);
        }

        .d3 {
            /* translate根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù)，從當(dāng)前元素位置移動。 */
            transform: translate(200px, 200px);
        }

        .d4 {
            /* translate根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù)，從當(dāng)前元素位置移動。 */
            transform: translate(0, 200px);
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 第一步： 在容器里邊寫一個盒子；綁定一個樣式 -->
        <div id="box" :class="postionClass">

        </div>
        <!-- 第四步：寫一個點擊事件 -->
        <button @click="toggle">點擊切換</button>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            // 第三步 ： 樣式設(shè)置默認(rèn)值
            data: {
                // postionClass: 'd1',
                // 第六步設(shè)定index初始值為1；從d1 d2 d3 d4后邊這個1
                index: 1
            },
            computed: {
                postionClass(){
                    return 'd' + this.index
                }
            },
            methods: {
                // 第五步：綁定點擊事件
                toggle() {
                    // 第八步： 判斷index不能大于4，返回1 (d1)；否則的話返回的是index+1
                    this.index = this.index + 1 > 4 ? 1 : this.index + 1;
                    // 第七步：點擊
                    // this.postionClass = 'd' + this.index
                }
            }
        })
    </script>
</body>

</html>