VUE 实现tab切换效果
程序员文章站
2022-03-28 11:10:29
...
一：vue登录tab切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul li {
list-style: none;
display: inline-block;
border: 1px solid dodgerblue;
height: 30px;
line-height: 30px;
width: 120px;
text-align: center;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li v-on:click="qh(true)">
<span >二维码登录</span>
</li>
<li v-on:click="qh(false)">
<span >邮箱登录</span>
</li>
</ul>
<div style="margin-left:80px" v-if="temp">
<img src="imgs/1.jpg" alt="">
</div>
<div style="margin-left:80px" v-if="!temp">
<form action="https://mail.163.com/" method="post">
<p><input type="email"></p>
<p><input type="password"></p>
<p><input type="submit" value="登录"></p>
</form>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
new Vue({
el: '#box',
data: {
temp:true
},
methods:{
qh:function (t) {
console.log(t);
this.temp=t
}
}
})
</script>
</body>
</html>二：Tab切换多页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
ul li {
list-style: none;
display: inline-block;
border: 1px solid dodgerblue;
height: 30px;
line-height: 30px;
width: 120px;
text-align: center;
}
</style>
<!-- 引用vue.js文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<div id="app">
<ul>
<!--- 给li标签绑定click时间,点击该li标签将索引传给函数重新赋值给num--->
<li v-for="(index,item) in tabs" :class="{active:item == num}" @click="tab(item)">
{{item}}{{index}}
</li>
</ul>
<div class="tabCon">
<!--- 循环遍历tabContents数组中的元素,v-show绑定事件,当循环的索引等于num中的值,显示该itemCon值 --->
<div v-for='(index,itemCon) in tabContents' v-show="itemCon == num">
{{itemCon}}{{index}}
</div>
</div>
</div>
<!--这里是js代码-->
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
tabs: ["标题一", "标题二","标题三"],
tabContents: ["内容一", "内容二","内容三"],
num: ''
},
methods: {
tab:function (item) {
this.num = item;
}
}
});
</script>