vue实现不循环切换点击状态

其实很简单,这里就不费话了

html

<!-- 切换 -->
<article class="tabs">
	<template >
	    <div class="items"><span :class="{active: shows == 1}" @click="newest">最新</span></div>
		<div class="items"><span :class="{active: shows == 2}" @click="hot">热门</span></div>
		<div class="items"><span :class="{active: shows == 3}" @click="sales">销量</span></div>
		<div class="items"><span :class="{active: shows == 4}" @click="price">价格</span></div>
    </template>
</article>

js

methods: {
    //切换状态
    newest() {
	    this.shows = 1
	},
	hot() {
		this.shows = 2
	},
	sales() {
		this.shows = 3
	},
	price() {
		this.shows = 4
	},
}

css

.active{
    color: red
}

ok了