vue实现单击选中效果
程序员文章站
2022-05-15 13:48:56
...
<button type="button" class="changeBtn" :class="{'activeBtn':isLife}" @click="isLife = !isLife">抬动</button>
<style>
.formText .changeBtn{
margin-left: 1.2rem;
color: #aeaeae;
border-color: #939393;
background: #fff;
}
.formText .activeBtn{
color: #fff;
border-color: #2b73c9;
background: #2b73c9;
}
</style>
<script>
export default {
data() {
return {
isLife:false,
}
}
}
</script>
效果图:
上一篇: Vue的常用指令之事件绑定(v-on)
下一篇: 重学VUE——vue 常用指令有哪些?
推荐阅读
-
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
-
Vue开发实现吸顶效果的示例代码
-
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
-
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
-
C#利用反射技术实现去掉按钮选中时的边框效果
-
vue.js2.0 实现better-scroll的滚动效果实例详解
-
基于vue2.0实现仿百度前端分页效果附实现代码
-
vue2.0 中使用transition实现动画效果使用心得
-
Vue使用vue-area-linkage实现地址三级联动效果的示例
-
vue动态组件实现选项卡切换效果