#vue# 实现点击切换active样式&tab栏的制作思路步骤!
语法:
:class={active:变量名}、@click=“方法名”、布尔值
需求:需要有当前态(就是状态的是被选中模式),
点击以后切换到另一个tab页,且加入active的样式
适用场景:tab栏、导航栏
思路:
(1)tab栏、导航栏这些一般都是差不多样式的,所以共用一个类名,不要设置宽度
(2)再写鼠标点击以后的样式(即系active)
:active表示鼠标点击状态
.active {xxxxx}
(3)在需要切换的标签处,绑定class的active,设置布尔值
:class="{'active':onShow}" //onShow 是一个变量名来的,赋的值是布尔值(true/false)
(4)在data-----return里面设置tab栏、导航栏的初始化状态
data() {return {onShow:true, offShow:false}},
(5)绑定鼠标点击事件,在再methods里面写入,触发事件时,标签的布尔值进行切换
@click="getTime()methods: {getTime() {this.onShow = true;this.offShow = false;},
完整的demo代码如下:
<template><div><p class="info-item" :class="{'active':onShow}" @click="getTime()">我是小丸子</p><p class="info-item" :class="{'active':offShow}" @click="getText()">我是盖子盖子</p></div></template><script>export default {data() {return {//因为在初始化的时候,就已经有一个当前态样式了,所以在触发点击事件以后,应该还是跟前面的布尔值保持一致,具体多试一下就知道了onShow:true, offShow:false}},methods: {getTime() {this.onShow = true;this.offShow = false;},getText() {this.onShow = false;this.offShow = true;}}}</script><style scoped>div {width: 10rem;height: 5rem;background-color: #FECC8F;margin: 1rem auto;}.info-item {display: inline-block;width:2rem;height: 2rem;background-color: #FFFFFF;font-size: .2rem;color: #000000;margin-top: .8rem;margin-right: .8rem;}.active {background-color: #DA1A14;}</style>