用vue简单实现开关滑动按钮效果

最新推荐文章于 2025-02-15 09:00:00 发布

布布-flex

最新推荐文章于 2025-02-15 09:00:00 发布

阅读量1.1k

点赞数 1

分类专栏： vue 文章标签： elementui 前端 javascript

本文链接：https://blog.youkuaiyun.com/luckyyulun/article/details/130723961

版权

vue 专栏收录该内容

6 篇文章

订阅专栏

文章展示了如何在Vue中不使用UI组件，通过CSS和JavaScript实现一个手机端的开关按钮切换功能。关键代码包括CSS样式定义了开关的外观和状态变化，HTML结构设置了开关元素，而JavaScript部分使用Vue的数据绑定和事件处理来控制开关的状态切换。

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

在项目开发中，我们经常会碰到手机端按钮开关切换的功能，而在Vue中想实现这样的功能也应该有很多种，用ui组件，那么用vue原生如何实现呢

效果图如下：

css部分：

.switch,
        .switchActive{
            width: 70px;
            height: 30px;
            background-color: red;
            border-radius: 18px;
            margin:  0 auto;
        }
        .switchActive{
            background-color: green;
        }
        .switchItem,
        .switchItemActive{
            width: 30px;
            height: 30px;
            background-color: #fff;
            border-radius: 50%;
        }
        .switchItemActive{
           transform: translateX(41px);
           transition: 2s;

        }

HTML部分：

<div id="app">
        <div :class="index==0?'switch':'switchActive'" @click="index=index==0?1:0">
            <div :class="index==0?'switchItem':'switchItemActive'">

            </div>
        </div>
    </div>

js部分：

 const vm=new Vue({
            el:'#app',
            data:{
                index:0
            }
        })