vue 监听添加样式，并移除兄弟节点上的样式（选项卡）

基础html

	<telemplate>
		<view class="menu-tab-content">
			<!--通过循环列表，监听列表index，判断点击添加样式-->
			<!--给点击的index添加样式-->
			<!--绑定样式-->
			<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;
	}