案例：Tab选项卡

标签： vue.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    
    .tab ul {
      overflow: hidden;
      padding: 0;
      margin: 0;
    }
    .tab ul li {
      box-sizing: border-box;
      padding: 0;
      float: left;
      width: 100px;
      height: 45px;
      line-height: 45px;
      list-style: none;
      text-align: center;
      border-top: 1px solid blue;
      border-right: 1px solid blue;
      cursor
    }
    .tab ul li:first-child {
      border-left: 1px solid blue;
    }
    .tab ul li.active {
      background-color: orange;
    }
    .tab div {
      width: 500px;
      height: 300px;
      display: none;
      text-align: center;
      font-size: 30px;
      line-height: 300px;
      border: 1px solid blue;
      border-top: 0px;
    }
    .tab div.current {
      display: block;
    }
  </style>
</head>
<body>
  <div id="app">

    <div class="tab">

      <ul>
        <li v-on:click='change(index)' :class='currentIndex==index?"active":""' :key='item.id' v-for='(item,index) in list'>{{item.title}}</li>
      </ul>

      <br>
      <div :class='currentIndex==index?"current":""' :key='item.id' v-for='(item, index) in list'>
        <img :src="item.path">
      </div>
    </div>

  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">

    var vm = new Vue({
      el: '#app',
      data: {
        currentIndex: 0, // 选项卡当前的索引
        list: [{
          id: 1,
          title: 'apple',
          path: 'img/apple.png'
        },{
          id: 2,
          title: 'orange',
          path: 'img/orange.png'
        },{
          id: 3,
          title: 'lemon',
          path: 'img/lemon.png'
        }]
      },
      methods: {
        change: function(index){
          // 在这里实现选项卡切换操作：本质就是操作类名
          // 如何操作类名？就是通过currentIndex
          this.currentIndex = index;
        }
      }
    });
  </script>
</body>
</html>

本文链接：https://blog.csdn.net/qq_39368007/article/details/105393025

智能推荐

模拟按键 —— 鼠标

背景之前写自动化脚本的时候总是遇到一些很尴尬的问题：跑脚本时模拟鼠标按键时，光标是真实的跑到了那个位置的，也就是说跑脚本的时候会很影响电脑的正常使用，导致不得不开一个虚拟机专门跑。另外因为光标只有一个所以很难实现多线程去同时操作多个窗口，当线程1 模拟鼠标但还没有结束时，线程2 已经开始执行模拟操作，这就导致了线程1 的模拟操作被终止了，被迫之下只能开多个虚拟机（但实在太占用性能🙄）解决...

一、Hibernate简介一个持久层的ORM框架。ORM：Object Relational Mapping（对象关系映射）。指的是将一个Java中的对象与关系型数据库中的表建立一种映射关系，从而操作对象就可以操作数据库中的表。二、Hibernate入门 1、创建一个项目，引入jar包 hibernate用到的jar包 2、创建表 3、创建实体类 4、创建映射（*****）映射需要通过XML...

Linux系统NFS

文章目录 1. nfs简介 1.1 nfs特点 1.2 使用nfs的好处 1.3 nfs的体系组成 1.4 nfs的应用场景 2. nfs工作机制 2.1 RPC 2.2 NIS 2.3 nfs工作机制 3. exports文件的格式 4. nfs管理 5. 作业 5.1手动搭建一个nfs服务器 5.1.1开放/nfs/shared目录，供所有用户查阅资料 5.1.2 开放/nfs/upload目...

关于java中String，StringBuffer，StringBuilder的区别以及StringBuffer，StringBuilder的安全性问题

这里的结果就是正确的然后我们来看他的append方法它在前边加了一个synchronized来修饰，相当于同时只能有一个线程来访问他，这样就不会产生上边的问题但同时他的效率也就比StringBuilder低，...

Django连接现有mysql数据库

1、打开cmd后cd到项目位置 2、建立项目 django-admin startproject test2 3、编辑项目中的配置文件, mysite/settings.py ,告诉Django你的数据库连接参数和数据库名。具体的说，要提供 DATABASE_NAME , DATABASE_ENGINE , DATAB...

案例：Tab选项卡

智能推荐

猜你喜欢