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

 <!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. JAVA DateUtil 工具类封装(转)

    原文链接 https://blog.csdn.net/wangpeng047/article/details/8295623  作者三次整理后的代码 下载链接   https://www.lanzou ...

  2. 如何将dmp文件导入到Oracle

    一.概述 在将dmp文件导入到Oracle中之前,需要先创建一个orcale用户.然后使用该用户名和密码,以imp的方式将数据导入到oracle中. 二.执行步骤 1.登陆oracle数据库 a.sq ...

  3. DevOps - 为什么

    章节 DevOps – 为什么 DevOps – 与传统方式区别 DevOps – 优势 DevOps – 不适用 DevOps – 生命周期 DevOps – 与敏捷方法区别 DevOps – 实施 ...

  4. Redis数据类型及其操作

    redis数据类型即操作 1. 字符串 set 设置字符串 格式: set key value 例子: set name kainhuck get 获取字符串的值 格式: get key 例子: ge ...

  5. tab选项卡,不带自动切换定时器

    <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...

  6. 一道算法题加深我对C++中map函数的理解

    一.一道题目引发我对map函数的考量 首先是题目大意:有n个银行,a[i]表示这个人在第i个银行有a[i]块钱(可以是负数),所有银行的钱加起来正好是0.每次只能在相邻的银行之间转账,问最少要转多少次 ...

  7. CSS - input 只显示下边框

      CSS 样式 :   border:none;   border-bottom: 1px solid #000

  8. mongodb - schema中格式时间

       date:{ type: String,        default: () => moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),   ...

  9. echarts 柱状图的选中模式实现-被选中变色和再次选中为取消变色

    方法: function barCharShow(curr_dim,divId,result_data){ mutilDim(curr_dim);//维度信息 var paint = initEcha ...

  10. HZNU-ACM寒假集训Day12小结 数论入门

    符号说明 a|b      a整除b (a,b)    a与b的最大公因数 [a,b]     a与b的最小公倍数 pα||a    pα|a但pα+1∤a a≡b(mod m) a与b对模m同余 a ...