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

秒速五厘米 2021-09-07 06:12 763阅读 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 条评论，763人围观）

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

相关阅读

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

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

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

相关 div添加样式 vue_vue.js

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

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

相关 Vue-监听事件、移除事件（节流处理）

> 业务：header（fixed定位）在顶部时是transparent的，当scroll触发，添加背景色；再次移动到顶端还是transparent的。 > > deposi

柔光的暖阳◎/ 2022年11月29日 11:42/ 0 赞/ 303 阅读

相关 div添加样式 vue_vue如何给组件加css样式

vue给组件加css样式的方法：首先在【.vue】文件中设置相关代码；然后新建【index.js】文件，并建立对应的【record.scss】文件即可。 ![05163755

本是古典何须时尚/ 2022年10月23日 04:57/ 0 赞/ 333 阅读

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

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

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

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

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

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

相关添加、移除、移动、复制、创建和查找节点

创建节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 cr

冷不防/ 2022年02月27日 17:42/ 0 赞/ 207 阅读

相关 jQuery如何移除css样式？

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

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

相关 jquery移出，添加样式

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

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

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

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

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