Vue table切换

最新推荐文章于 2024-12-24 20:00:00 发布

Q久夏青

最新推荐文章于 2024-12-24 20:00:00 发布

阅读量1k

点赞数

分类专栏：前端攻城狮成长记录

本文链接：https://blog.youkuaiyun.com/Starjg101/article/details/93533914

版权

前端攻城狮成长记录专栏收录该内容

54 篇文章

订阅专栏

动态渲染className

:class="{active : isActive == 0}"
:class="{active : isActive == 1}"	
:class="{active : isActive == 2}"
:class="{active : isActive == 3}"

v-show显示隐藏切换

v-show = "nowIndex == 0"
v-show = "nowIndex == 1"	
v-show = "nowIndex == 2"
v-show = "nowIndex == 3"

@click = “month” 点击事件切换

点击样式

.active{
    border:2px solid #E8C283 !important;
    background-color: #FFFBF2;
}

html

<div class="rechargeTerm">
    	   <ul id="month" :class="{active : isActive == 0}" @click = "month">
    	        <li>月包</li
    			<li><i>￥</i>268</li>
    	    </ul>
    	    <ul id="quarter" :class="{active : isActive == 1}" @click = "quarter">
    	        <li>季度包</li>
    	        <li><i>￥</i>568</li>
    	        <li>折合189.3/月</li>
    	    </ul>
</div>