<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <script src="../vue.js"></script>
    <style>
*{
 padding: 0px;
  margin: 0px;
 }
 
 .wrapper{
  margin: 50px auto;
  width: 450px;
 height:400px;
  border: 1px solid #000;
  }
  .nav{
  list-style: none;
  width: 450px;
  height: 80px;
  font-size: 0px;
  }
 .nav li{
  width: 148px;
 height:80px;
  font-size: 16px;
  border: 1px solid #000;
 display: inline-block;
  text-align: center;
 line-height: 80px
 }
 .content div{
width: 450px;
height: 320px;
text-align: center;
  line-height: 320px;
 background:pink;
 }
  .primary{
 background:red
 }
 .default{
 background:#aaa;
 }
 </style>
</head>

 
<body>
  <div id='app'>
  <div class='wrapper'>
 <ul class='nav'>
  <li v-for='(item,index) in list'
 @click='sel(index)'
:class='index==selIndex?"primary":"default"'
 >{{item.title}}</li>
 </ul>
  <div class='content'>
  <div v-for='(item,index) in list'
  v-if='index==selIndex'
  >{{item.info}}</div>

     </div>
    </div>
  </div>

<script>
  new Vue({
    el:'#app',
    data:{
      list:[{title:'荷花',info:'小荷才露尖尖角，早有蜻蜓立上头'},
            {title:'菊花',info:'采菊东篱下，悠然见南山'},
             {title:'梅花',info:'墙角数枝梅，凌寒独自开'}],
       selIndex:0
     },
    methods: {
     sel(index){
         this.selIndex=index
        }
    },
 })

</script>
</body>
</html>

Vue实现选项卡效果的更多相关文章

  1. Vue 框架-06-条件语句 v-if 实现选项卡效果

    Vue 框架-06-条件语句 v-if 实现选项卡效果 本片介绍的是 Vue 中条件语句 v-if 第一个小实例是,通过 v-if="布尔值",通过布尔值的真假来决定,某元素是否显 ...

  2. vue实现选项卡切换效果

    效果如下: 说明: 这里我使用的原理是利用vue中的v-show/显示隐藏指令,当为true的时候显示,为false的时候隐藏 1html代码: <head> <meta chars ...

  3. Javascript进阶篇——总结--DOM案例+选项卡效果

    断断续续的把慕课的JavaScript基础和进阶看完了,期间不怎么应用有的都忘记了,接下来多开始写些效果,进行实际应用. 制作一个表格,显示班级的学生信息. 1. 鼠标移到不同行上时背景色改为色值为 ...

  4. 049——VUE中使用animation与transform实现vue的动画效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. CSS3及JS简单实现选项卡效果（适配手机端和pc端）

    想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100 ...

  6. 微信小程序实例：实现tabs选项卡效果

    最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释.正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了.很多组件微信内部已 ...

  7. WPF实现选项卡效果（2）——动态添加AvalonDock选项卡

    原文:WPF实现选项卡效果(2)--动态添加AvalonDock选项卡 简介 在前面一篇文章里面,我们使用AvalonDock实现了类似于VS的选项卡(或者浏览器的选项卡)效果.但是我们是通过xaml ...

  8. WPF实现选项卡效果（3）——自定义动态添加的AvalonDock选项卡内容

    原文:WPF实现选项卡效果(3)--自定义动态添加的AvalonDock选项卡内容 简介 在前面一篇文章里面,我们实现了AvalonDock选项卡的动态添加,但是对于选项卡里面的内容,我们并没有实现任 ...

  9. WPF实现选项卡效果（1）——使用AvalonDock

    原文:WPF实现选项卡效果(1)--使用AvalonDock 简介 公司最近一个项目,软件采用WPF开发,需要实现类似于VS的选项卡(或者是浏览器的选项卡)效果.搜寻诸多资料后,发现很多同仁推荐Ava ...

随机推荐

  1. Java for LeetCode 101 Symmetric Tree

    Given a binary tree, check whether it is a mirror of itself (ie, symmetric around its center). For e ...

  2. STM32 ~ USART接收不定长数据

    IDLE中断什么时候发生? IDLE就是串口收到一帧数据后,发生的中断.什么是一帧数据呢?比如说给单片机一次发来1个字节,或者一次发来8个字节,这些一次发来的数据,就称为一帧数据,也可以叫做一包数据. ...

  3. SpringBoot学习笔记（12）：计划任务

    SpringBoot学习笔记(12):计划任务 计划任务 在企业的实践生产中,可能需要使用一些定时任务,如月末.季末和年末需要统计各种各样的报表,每周自动备份数据等. 在Spring中使用定时任务 1 ...

  4. java多线程---基础

    一, java多线程----线程与进程 进程: 程序(任务)的执行过程,拥有资源(共享内存,共享资源)和线程(一个或者多个,至少一个).  例如:打开任务管理器,qq,chrome,都属于进程. 线程 ...

  5. php中一些比常见做法更好的实践

    有些被我们习以为常的做法未必就是最好的,它们可能存在一些安全问题,而解决这些隐患的成本,其实并不高: 密码 常见做法是直接MD5进行加密,比如这样: //加密 $passwordStr = md5($ ...

  6. 素数筛总结篇___Eratosthenes筛法和欧拉筛法（*【模板】使用 ）

    求素数 题目描述 求小于n的所有素数的数量. 输入 多组输入,输入整数n(n<1000000),以0结束. 输出 输出n以内所有素数的个数. 示例输入 10 0 示例输出 4 提示 以这道题目为 ...

  7. 1123 Is It a Complete AVL Tree（30 分）

    An AVL tree is a self-balancing binary search tree. In an AVL tree, the heights of the two child sub ...

  8. bzoj 4066: 简单题 K-D树

    题目大意: http://www.lydsy.com/JudgeOnline/problem.php?id=4066 题解 我们把每次的修改操作都当作二维平面上多了一个权值点 对于每组询问可以看做求一 ...

  9. unicode和utf-8互转

    1.1 ASCII码 我们知道, 在计算机内部, 所有的信息最终都表示为一个二进制的字符串. 每一个二进制位(bit)有0和1两种状态, 因此八个二进制位就可以组合出 256种状态, 这被称为一个字节 ...

  10. bzoj 1202 [HNOI2005]狡猾的商人——带偏移量的并查集

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1202 带偏移量的并查集. 注意先 find() 再调用 dis !!! 自己的对拍太水了. ...