vue的选项卡功能
选项卡:点击不同的按钮会显示不同的内容
<!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的选项卡功能的更多相关文章
- Vue.js 基本功能了解
一.写在前面 隔了这么久才来出Vue的第二篇文章,真是堕落了,自己先惩罚下/(ㄒoㄒ)/~~ 回过头看自己第一篇相关文章<初试 Vue.js>(http://www.cnblogs.com ...
- Vue.js 基本功能了解一下~
一.写在前面 隔了这么久才来出Vue的第二篇文章,真是堕落了,自己先惩罚下/(ㄒoㄒ)/~~ 回过头看自己第一篇相关文章<初试 Vue.js>(http://www.cnblogs.com ...
- 原生js、jQuery实现选项卡功能
在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡 话不多说,先给各位看一下功能图: 好了,下边 ...
- Android中选项卡功能的实现
Android中选项卡功能的实现 Android中使用TabHost和TabWidget来实现选项卡功能.TabHost必须是布局的根节点,它包含两个子节点: TabWidget,显示选项卡: Fra ...
- Vue实现上传图片功能
前言: 用vue实现上传图片功能,效果图如下: 先说文件上传控件样式美化怎么做,我有两种方法. 1.先上代码 html部分: <div class="pics-wrapper" ...
- 原生Js_实现简单选项卡功能
javascript实现选项卡功能,在<script>...</script>中编写代码 实现步骤 a)获得各操作的dom对象: b)在所有按钮对象上添加单击事件: c)设置所 ...
- vue实现搜索功能
vue实现搜索功能 template 部分 <!-- 搜索页面 --> <template> <div> <div class="goback&qu ...
- vue实现选项卡切换效果
效果如下: 说明: 这里我使用的原理是利用vue中的v-show/显示隐藏指令,当为true的时候显示,为false的时候隐藏 1html代码: <head> <meta chars ...
- 使用原生js实现选项卡功能实例教程
选项卡是前端常见的基本功能,它是用多个标签页来区分不同内容,通过选择标签快速切换内容.学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础. 先来完成html部分 ...
随机推荐
- 解决datagridview 横向的scrollbar不显示
下午遇到这个问题.看到了网上各种解决办法.都没搞定. 新建了一个datagridview.发现是没问题了.仔细对比了一下它们的属性. 在Columns的属性中,有一项:Frozen, 把这个值改顺默认 ...
- Educational Codeforces Round 64 选做
感觉这场比赛题目质量挺高(A 全场最佳),难度也不小.虽然 unr 后就懒得打了. A. Inscribed Figures 题意 给你若干个图形,每个图形为三角形.圆形或正方形,第 \(i\) 个图 ...
- Golang的选择结构-switch语句
Golang的选择结构-switch语句 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.选择语句应用场景概述 选择结构也称为条件判断,生活中关于判断的场景也非常的多,比如: ( ...
- 51nod 1437:迈克步 单调栈基础题
1437 迈克步 题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 分值: 80 难度:5级算法题 收藏 取消关注 有n只熊.他们站成一排队伍,从左到右依次1到 ...
- 083-PHP的foreach循环
<?php $arr = array(1, 2, 3, 4); foreach ($arr as &$value) { $value = $value * 2; } print_r($a ...
- maven详解之仓库
在Maven中,任何一个依赖.插件或者项目构建的输出,都可以称之为构件. Maven在某个统一的位置存储所有项目的共享的构件,这个统一的位置,我们就称之为仓库.(仓库就是存放依赖和插件的地方) 任何的 ...
- POJ 3311 Hie with the Pie 最短路+状压DP
Hie with the Pie Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 11243 Accepted: 5963 ...
- 08 SSM整合案例(企业权限管理系统):10.权限关联与控制
04.AdminLTE的基本介绍 05.SSM整合案例的基本介绍 06.产品操作 07.订单操作 08.权限控制 09.用户操作 10.权限关联与控制 11.AOP日志 10.权限关联与控制 1.用户 ...
- VUE中常用的一些方法
1.获取URL中的参数 export function getUrlKey(name) { return decodeURIComponent((new RegExp('[?|&]' + na ...
- 基于Ambari的WebUI部署HBase服务
基于Ambari的WebUI部署HBase服务 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.部署Ambari服务 博主推荐阅读: https://www.cnblogs.co ...