vue v-on事件監聽

本文轉載自查看原文 2019-09-06 10:58 461 v-on事件監聽

通過點擊按鈕，實現背景色的循環變換

初始為紅色，點擊一次，變成藍色，第二次變成綠色，再次點擊，又變為紅色

這里用到vue的事件監聽 v-on:xxx

事件寫在methods里面

代碼部分

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue-test3</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <style>
    .red{
        background: red;
    }
    .blue{
        background: blue;
    }
    .green{
        background: green;
    }
    </style>
</head>

<body>
    <div id="test">
        <button v-on:click="clickFun()">點擊</button>
        <p :class="classAttr[index]">改變背景色</p>
    </div>

    <script>
        const vm = new Vue({
            el: '#test',
            data: {
                classAttr: ['red', 'blue', 'green'],
                index: 0,
                count: 0
            },
            methods: {
                clickFun() {
                    // this = vm this就是vue實例對象 獲取data里的數據
                    this.index = ++this.count % 3

                }
            }
        })
    </script>
</body>

</html>

v-on可以簡寫成@ 效果一樣

<button @click="clickFun()">點擊</button>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue 事件監聽 v-on vue中的v-on事件監聽機制 vue解惑之v-on(事件監聽指令) vue v-on監聽事件 vue v-on:事件 vue中輸入框事件監聽 v-on:input vue中的事件監聽之——v-on vs .$on Vue綁定事件監聽器（v-on） vue v-on 帶參事件 vue v-on .prevent阻止默認事件