选项卡：点击不同的按钮会显示不同的内容

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>vue选项卡学习</title>

     <style>

     .box{

         border:1px solid blueviolet;

         height: 228px;

         width: 323px;

          background-color: bisque;

     }

     </style>

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

     <script type="text/javascript">

         window.onload= function(){

             var app = new Vue({

                 el:"#app",

                 data:{

                     tabId:0

                 }

             });

         }

     </script>

 </head>

 <body>

     <div id="app">

         <!-- tab 选项 -->

         <div class="tab">

             <!-- 制作选项卡头部的网页 click单击-->

             <a href="#" @click="tabId=0" class="{tabId=0}">

                 <!-- button 按钮 -->

                <button style="background-color:blueviolet"> mysql</button>

             </a>

             <a href="#" @click="tabId=1" class="{tabId=1}">

                 <button style="background-color:palevioletred">jquery</button>

             </a>

             <a href="#" @click="tabId=2" class="{tabId=2}">

                 <button style="background-color:aqua">vue.js</button>

             </a>

         </div>

         <br/>

         <!-- box 内容 -->

         <div class="box" >

             <!-- 制作选项卡内容 === 是判断 -->

             <div v-show="tabId===0" style="background-color:brown">mysql的内容

             <img src="./微信图片_20181121185958.jpg"/>

             </div>

             <div v-show="tabId===1">

             <img src="./微信图片_20181121185952.jpg" width="300" height="200"/>

                 jquery的内容

             </div>

             <div v-show="tabId===2">

             <img src="./微信图片_20181121185947.jpg" width="320" height="200"/>

                 vue.js的内容

             </div>

         </div>

     </div>

 </body>

 </html>

vue的选项卡功能的更多相关文章

  1. Vue.js 基本功能了解

    一.写在前面 隔了这么久才来出Vue的第二篇文章,真是堕落了,自己先惩罚下/(ㄒoㄒ)/~~ 回过头看自己第一篇相关文章<初试 Vue.js>(http://www.cnblogs.com ...

  2. Vue.js 基本功能了解一下~

    一.写在前面 隔了这么久才来出Vue的第二篇文章,真是堕落了,自己先惩罚下/(ㄒoㄒ)/~~ 回过头看自己第一篇相关文章<初试 Vue.js>(http://www.cnblogs.com ...

  3. 原生js、jQuery实现选项卡功能

    在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡 话不多说,先给各位看一下功能图:              好了,下边 ...

  4. Android中选项卡功能的实现

    Android中选项卡功能的实现 Android中使用TabHost和TabWidget来实现选项卡功能.TabHost必须是布局的根节点,它包含两个子节点: TabWidget,显示选项卡: Fra ...

  5. Vue实现上传图片功能

    前言: 用vue实现上传图片功能,效果图如下: 先说文件上传控件样式美化怎么做,我有两种方法. 1.先上代码 html部分: <div class="pics-wrapper" ...

  6. 原生Js_实现简单选项卡功能

    javascript实现选项卡功能,在<script>...</script>中编写代码 实现步骤 a)获得各操作的dom对象: b)在所有按钮对象上添加单击事件: c)设置所 ...

  7. vue实现搜索功能

    vue实现搜索功能 template 部分 <!-- 搜索页面 --> <template> <div> <div class="goback&qu ...

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

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

  9. 使用原生js实现选项卡功能实例教程

    选项卡是前端常见的基本功能,它是用多个标签页来区分不同内容,通过选择标签快速切换内容.学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础. 先来完成html部分 ...

随机推荐

  1. asp.net+sql数据库学生信息管理系统

    一款学生信息管理系统送给大家. 功能部分: 1.教师管理(添加,修改,删除,查看) 2.学生管理(添加,修改,删除,查看) 3.班级管理(添加,修改,删除,查看) 4.学生成绩管理(添加,修改,删除, ...

  2. ubuntu18.04.2 Hadoop伪集群搭建

    准备工作: 若没有下载vim请下载vim 若出现 Could not get lock /var/lib/dpkg/lock 问题请参考: https://jingyan.baidu.com/arti ...

  3. Codeforces 1111C Creative Snap分治+贪心

    Creative Snap C. Creative Snap time limit per test 1 second memory limit per test 256 megabytes inpu ...

  4. Windows Server 2008 R2 ntoskrnl.exe 引起蓝屏故障，重新启动

    前不久在HP ProLiant DL360 G6的服务器上面安装了Windows Server 2008 R2,系统一到晚上凌晨就出现蓝屏.重启现象,并且在 C:\Windows\Minidump 目 ...

  5. 从PC厂商狠抓粉丝经济看，春天将至？

    10月中旬,市场研究机构IDC发布的全球三季度PC出货量报告显示,第三季度全球个人电脑出货量总计6740万台,比去年同期下降0.9%.似乎这一数据的发布,依旧在证明着PC市场的颓势.但在这样的大背景下 ...

  6. Arduino 的读串口与写串口

    //准备一下             while(Serial.available()>0)        WifiSerial.write(Serial.read());         wh ...

  7. C++编程学习（十）引用

    引用变量是一个别名,也就是说,它是某个已存在变量的另一个名字.一旦把引用初始化为某个变量,就可以使用该引用名称或变量名称来指向变量. 注意以下几点与指针的区别: 不存在空引用.引用必须连接到一块合法的 ...

  8. Vulkan SDK 之Render Pass

    Create a Render Pass A render pass describes the scope of a rendering operation by specifying the co ...

  9. Pycharm连接Mysql失败. [08001] Could not create connection to database server.

    使用Pycharm连接MySQL时遇到如下问题,错误代码[08001] 查了很多资料归纳一下可能是如下几个原因 0.mysql.server没开 找到对应系统下的mysql.server 启动/重启命 ...

  10. Lombok认知

    Lombok的简介 Lombok是一款Java开发插件,公司项目到处使用,整体效果很棒,代码更干净.Java开发人员可以节省出重复构建,诸如hashCode和equals这样的方法以及各种业务对象模型 ...