vue 选项卡

喵喵酱仔__

已于 2023-04-25 18:09:09 修改

阅读量537

点赞数

分类专栏： # 工具文章标签： javascript vue.js 前端

于 2023-04-25 17:43:49 首次发布

本文链接：https://blog.csdn.net/qq_38210427/article/details/130370418

版权

工具专栏收录该内容

23 篇文章 3 订阅

订阅专栏

1 方式一

这里写图片描述

<template>
  <div id="tab">
    <div class="tab-bar clearfix">
      <a href="javascript:;"
         @click="tab(index)"
         v-for="(item,index) in items"
         :class="{active : index===curId}"
      >{{item.item}}</a>
    </div>
    <div class="tab-con">
      <div
        v-show="index===curId"
        v-for="(content, index) in contents" >{{content.content}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        curId: 0,
        items: [
          {item: 'HTML'},
          {item: 'CSS'},
          {item: 'JavaScript'},
          {item: 'Vue'},
        ],
        contents: [
          {content: 'HTML'},
          {content: 'CSS'},
          {content: 'JavaScript'},
          {content: 'Vue'},
        ]
      }
    },

    methods: {
      tab (index) {
        this.curId = index;
      }
    }
  }
</script>

<style scoped>
  #tab {
    width: 400px;
    border: 1px solid #ccc;
    margin: 60px auto 0;
  }
  .tab-bar {
    width: 400px;
    background-color: #ccc;
  }
  .tab-bar a {
    float: left;
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
    color: #000;
  }
  .tab-bar .active {
    background-color: #0099ff;
  }
  .tab-con div {
    text-align: left;
    height: 100px;
  }

</style>

方式二：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue.js"></script>
		<style type="text/css">
			.active{
				color: firebrick;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 根据num值来添加active class 注意active是用单引号包裹的 -->
			<!-- 添加单击事件更改num的值 -->
			<button :class="num==1?'active':''" @click="num=1">html</button>
			<button :class="num==2?'active':''" @click="num=2">css</button>
			<button :class="num==3?'active':''" @click="num=3">javascript</button>
			<!-- 根据num动态切换显示div内容 -->
			<div v-show="num==1">html内容</div>
			<div v-show="num==2">css内容</div>
			<div v-show="num==3">javascript内容</div>
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					// 当前索引（显示的索引，需要添加class的索引）
					num:1,
				},
			})
		</script>
	</body>
</html>