Vue之导航栏

Vue之导航栏今天我们来用vue实现简单的导航栏。效果图：根据点击的tab来展示对应的内容。其实很简单，用到了vue的v-show和绑定class。首先创建一个属性“shouDiv” 用来判断显示哪一个tab页。再为每一个连接注册点击事件：@click="showDiv=1"分别让sho..

shaojia_

4770人浏览 · 2018-08-07 00:47:50

shaojia_ · 2018-08-07 00:47:50 发布

Vue之导航栏

今天我们来用vue实现简单的导航栏。

效果图：

根据点击的tab来展示对应的内容。其实很简单，用到了vue的v-show和绑定class。

首先创建一个属性“shouDiv” 用来判断显示哪一个tab页。

再为每一个连接注册点击事件：@click="showDiv=1"分别让showDiv值改变。

然后为每一个tab页内容绑定v-show用来判断当前showDiv的值来确定是否显示当前div。

最后为tab连接绑定class用来显示点击状态 :class="{'select':showDiv===3}" 如果showDiv=3时就写入样式select

完整代码：

<body>
	<div id="test">
		<div class="tab">
			<a href="#" @click="showDiv=1" :class="{'select':showDiv===1}">html</a>
			<a href="#" @click="showDiv=2" :class="{'select':showDiv===2}">css</a>
			<a href="#" @click="showDiv=3" :class="{'select':showDiv===3}">javascript</a>
			<a href="#" @click="showDiv=4" :class="{'select':showDiv===4}">vue</a>
		</div>
		<div class="tabConten" v-show="showDiv===1">
			<h1>html</h1>
		</div>
		<div class="tabConten" v-show="showDiv===2">
			<h1>css</h1>
		</div>
		<div class="tabConten" v-show="showDiv===3">
			<h1>javascript</h1>
		</div>
		<div class="tabConten" v-show="showDiv===4">
			<h1>vue</h1>
		</div>
	</div>
</body>
<script >
	new Vue({
		el : "#test",
		data : {
			showDiv : 1,
		}
	})
</script>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^