vue实现点击Button效果

最新推荐文章于 2025-06-29 09:29:56 发布

原创最新推荐文章于 2025-06-29 09:29:56 发布 · 8.8k 阅读

3 ·

CC 4.0 BY-SA版权

Vue.js 专栏收录该内容

50 篇文章

订阅专栏

本文详细介绍了如何在Vue.js应用程序中实现点击Button的交互效果，包括绑定事件监听器、触发相应的方法以及更新视图。通过实例代码和步骤解析，帮助开发者掌握Vue中按钮点击事件的处理技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<ul class="top_bar">
    <li class="top_cell"
        v-for="cell in 5"
        :class="{ 'active': cell === selected }"
        @click="choose(cell)">
        {{cell}}
    </li>

</ul>

new Vue({
    el:'.top_bar',
    data:{
        selected: null
    },
    methods:{
        choose:function (index) {
            this.selected = index
        }
    }
});