Vue——tab栏切换增强版

最新推荐文章于 2023-02-15 01:26:05 发布

Wyyyy1024

最新推荐文章于 2023-02-15 01:26:05 发布

阅读量462

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_44389562/article/details/110085934

版权

Vue 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

题目描述
- 点击tab栏内容区域显示对应的内容
- 如点击 SECTION 1 则内容区域显示对应 SECTION 1 的内容同时当前 SECTION的字体颜色变成蓝色
训练目标
能够理解vue 中的数据渲染
能够理解 v-for, v-if , v-bind , v-click 的使用
能够理解 vue 中调用函数的时候传递参数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #app {
        width: 100%;
      }
      div {
        width: 200px;
      }
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        display: flex;
        justify-content: space-between;
        width: 800px;
        height: 150px;
        /* background-color: pink; */
        margin: 100px auto;
      }

      .content {
        width: 400px;
        /* background-color: blue; */
        border-left: 2px solid gray;
        border-right: 2px solid gray;
        display: none;
      }
      a {
        display: block;
        height: 50px;
        line-height: 50px;
        text-align: center;
        text-decoration: none;
        color: indigo;
        font-size: 18px;
        font-weight: 600;
      }
      .current{
          padding: 30px;
          font-size: 18px;
        font-weight: 600;
        color: gray;
          display: block;
          transition: all .3s;

      }
      .current>div{
          display: block;
        padding: 30px;
          font-size: 16px;
        
        color: gray;
      }
      .active{
          color: blue;
          
      }
    </style>
    <script src="./vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div class="box">
        <div >
          <a href="#" @click.prevent='change(index)' :class="currentIndex==index?'active':''" :key='item.id'  v-for="(item,index) in arr" v-if='index<arr.length/2'>{{item.title}}</a>
        </div>
        <div class="content transition" :class="currentIndex==index?'current':''" :key='item.id' v-for='(item,index) in arr' >{{item.title}}<br>{{item.content}}</div>
        <div>
          <a href="#" @click.prevent='chang(index)' :class="currentIndex==index?'active':''" :key='item.id' v-for="(item,index) in arr" v-if='index>=arr.length/2'>{{item.title}}</a>
        </div>
      </div>
    </div>

    <script>
      let options = {
        el: "#app",
        data: {
        currentIndex:0,
          arr: [
            {
              id: 1,
              title: "SECTION 1",
              content: "content1",
            },
            {
              id: 2,
              title: "SECTION 2",
              content: "content2",
            },
            {
              id: 3,
              title: "SECTION 3",
              content: "content3",
            },

            {
              id: 4,
              title: "SECTION 4",
              content: "content4",
            },
            {
              id: 5,
              title: "SECTION 5",
              content: "content5",
            },
            {
              id: 6,
              title: "SECTION 6",
              content: "content6",
            },
          ],
        },
        methods: {
            change:function(index){
                this.currentIndex=index
            },
            chang:function(index){
              
                this.currentIndex=index
            }
        },
      };
      var vm = new Vue(options);
    </script>
  </body>
</html>

Wyyyy1024

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue——tab栏切换增强版

题目描述点击tab栏内容区域显示对应的内容如点击 SECTION 1 则内容区域显示对应 SECTION 1 的内容同时当前 SECTION的字体颜色变成蓝色训练目标能够理解vue 中的数据渲染能够理解 v-for, v-if , v-bind , v-click 的使用能够理解 vue 中调用函数的时候传递参数<!DOCTYPE html><html lang="en"> <head> <me..
复制链接

扫一扫