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

来源：https://www.cnblogs.com/zhangcheng001/p/11472587.html

标签

vue

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!