vue 监听添加样式，并移除兄弟节点上的样式

秒速五厘米 2021-09-07 06:12 777阅读 0赞

![根据下标点击监听样式][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70]

基础html

<telemplate>
    		<view class="menu-tab-content">
    			
    			
    			
    			<view class="content-tabs" v-for="(item, index) in dataList" v-on:click="addClass(index,$event)" v-bind:class="{addClass:index==current}">
    				<view>{
       {item.name}}</view>
    			</view>
    		</view>
    	</telemplate>

循环列表，和添加样样式

<script>
    	export default { 
    		data() { 
    			return { 
    				current: 0, //默认第一个元素添加样式
    				dataList: [{ 
    					name: '日报'
    				}, { 
    					name: '月报'
    				}, { 
    					name: '年报'
    				}]
    			};
    		},
    		methods: { 
    			addClass: function(index, event) { 
    				this.current = index;
    			}
    		}
    <script>

图中样式CSS

.menu-tab-content { 
    		margin-left: 2px;
    		margin-top: 15px;
    		display: flex;
    		justify-content: flex-start;
    		align-items: center;
    		width: 100%;
    		height: 45px;
    		color: #FFFFFF;
    	}
    
    	.content-tabs{ 
    		margin-left: -1px;
    		display: flex;
    		justify-content: center;
    		align-items: center;
    		width: 33.3%;
    		height: 45px;
    		background: #FFFFFF;
    		color: #2E95FF;
    		border: 1px solid #2E95FF;
    		font-size: 18px;
    	}
    
    	.addClass { 
    		color: #FFFFFF;
    		background-color: #2E95FF;
    		font-size: 18px;
    	}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70]: /images/20210827/37f1ae3cfb464d70aefee61c45e209fd.png

发表评论取消回复

表情：

评论列表（有 0 条评论，777人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery 点击事件点击元素添加class，兄弟节点移除class

迎大家一起交流学习n(\*≧▽≦\*)n $("circle").on('click', 'li',function(){ $(this...

﹏ヽ暗。殇╰゛Y/ 2024年04月18日 18:27/ 0 赞/ 76 阅读

相关 a标签添加鼠标移入移出的样式

<a href="javascript:void(0);" οnmοuseοver="this.style.color='blue';" οnmοuseοut="this.st

待我称王封你为后i/ 2023年07月13日 03:49/ 0 赞/ 35 阅读

相关 hadoop正确地添加和移除节点

添加节点克隆克隆一台全新的Linux（如有IP冲突，可右击VMware右下角网络图标断开连接）打开/etc/hostname修改主机名打开/etc/sy

素颜马尾好姑娘i/ 2023年06月29日 05:39/ 0 赞/ 29 阅读

相关 vue 监听元素大小变化 element-resize-detector 并移除监听 uninstall

前言：记录一个好用的包，在做自适应模块的时候，可以实时监听页面中元素的宽高变化，弥补了window.onresize只能监听到由浏览器大小变化引起的元素变化的局限性；安装

我就是我/ 2023年03月01日 09:43/ 0 赞/ 25 阅读

相关 div添加样式 vue_vue.js

![5c1a340d86cd39c7fae0bba1ca3c916a.png][] vue.js 中M V MV代表哪一部分 <body> <!--

曾经终败给现在/ 2023年01月02日 02:29/ 0 赞/ 246 阅读

相关 angular js 给元素添加样式和移除样式

angular js 给id元素添加样式和移除样式 <li id="send-tab"><a ng-click="showSendMessageList(

冷不防/ 2022年06月16日 22:41/ 0 赞/ 344 阅读

相关进入页面给HTML标签添加、移除样式

<li οnclick="ckli(5)" id="a" >全部</li> <li οnclick="ckli(0)" i

本是古典何须时尚/ 2022年06月12日 09:08/ 0 赞/ 203 阅读

相关 jQuery如何移除css样式？

解决办法 1、移除全部样式使用removeattr（“style”）； 2、移除单个样式使用css（“属性”，“”）；例如： <script type=

骑猪看日落/ 2021年12月17日 16:53/ 0 赞/ 447 阅读

相关 jquery移出，添加样式

$("browseImage").removeAttr('style'); $("browseImage").attr("style","border: 1px

╰+攻爆jí腚メ/ 2021年10月18日 21:48/ 0 赞/ 435 阅读

相关 vue 监听添加样式，并移除兄弟节点上的样式

![根据下标点击监听样式][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4u

秒速五厘米/ 2021年09月07日 06:12/ 0 赞/ 778 阅读