Vue实现选项卡效果
<!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>
<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实现选项卡效果的更多相关文章
- Vue 框架-06-条件语句 v-if 实现选项卡效果
Vue 框架-06-条件语句 v-if 实现选项卡效果 本片介绍的是 Vue 中条件语句 v-if 第一个小实例是,通过 v-if="布尔值",通过布尔值的真假来决定,某元素是否显 ...
- vue实现选项卡切换效果
效果如下: 说明: 这里我使用的原理是利用vue中的v-show/显示隐藏指令,当为true的时候显示,为false的时候隐藏 1html代码: <head> <meta chars ...
- Javascript进阶篇——总结--DOM案例+选项卡效果
断断续续的把慕课的JavaScript基础和进阶看完了,期间不怎么应用有的都忘记了,接下来多开始写些效果,进行实际应用. 制作一个表格,显示班级的学生信息. 1. 鼠标移到不同行上时背景色改为色值为 ...
- 049——VUE中使用animation与transform实现vue的动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS3及JS简单实现选项卡效果(适配手机端和pc端)
想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100 ...
- 微信小程序实例:实现tabs选项卡效果
最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释.正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了.很多组件微信内部已 ...
- WPF实现选项卡效果(2)——动态添加AvalonDock选项卡
原文:WPF实现选项卡效果(2)--动态添加AvalonDock选项卡 简介 在前面一篇文章里面,我们使用AvalonDock实现了类似于VS的选项卡(或者浏览器的选项卡)效果.但是我们是通过xaml ...
- WPF实现选项卡效果(3)——自定义动态添加的AvalonDock选项卡内容
原文:WPF实现选项卡效果(3)--自定义动态添加的AvalonDock选项卡内容 简介 在前面一篇文章里面,我们实现了AvalonDock选项卡的动态添加,但是对于选项卡里面的内容,我们并没有实现任 ...
- WPF实现选项卡效果(1)——使用AvalonDock
原文:WPF实现选项卡效果(1)--使用AvalonDock 简介 公司最近一个项目,软件采用WPF开发,需要实现类似于VS的选项卡(或者是浏览器的选项卡)效果.搜寻诸多资料后,发现很多同仁推荐Ava ...
随机推荐
- Java for LeetCode 128 Longest Consecutive Sequence
Given an unsorted array of integers, find the length of the longest consecutive elements sequence. F ...
- mongo简介
MongoDB MongoDB是一款强大.灵活.且易于扩展的通用型数据库 MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统. 在高负载的情况下,添加更多的节点,可以保证服 ...
- mini2440 u-boot下设置tftp
在烧写好u-boot后,重新启动mini2440,一直按空格键进入u-boot界面: U-Boot 月 - ::) modified by tekkamanninja (tekkamanninja@. ...
- 51nod 1537
题目 神犇题解 证明好巧妙,给跪OTZ 题目的式子:$ {\left( {1{\rm{ + }}\sqrt 2 } \right)^{\rm{n}}} $,设其乘开之后为 $ {\rm{a + b}} ...
- 杂草丛生HTML5网站模板
杂草丛生HTML5个人网站模板是一款野草到处生长的HTML5网站模板下载. 模板地址:http://www.huiyi8.com/sc/8780.html
- js正则表达式(2)
找到以某个字符串开头的字符串 var myReg=/^(abc)/gim; 如果不加m,那么只找一行,而加了m可以找到每行中以该字符串开头的匹配文本. 如: abcsfsdfasd7890hklfah ...
- [原创]java向word模板中填充数据(总结)
使用过PageOffice动态生成word文档的人都知道,PageOffice可以给word文档的指定位置进行填充,这里我们所说的指定位置在PageOffice的专业术语里面有两个概念,一个叫做数据区 ...
- 插件_热部署_JRebel
一.License Server 1.运行反向代理 GitHub地址:https://github.com/ilanyu/ReverseProxy 下载地址:ReverseProxy_windows_ ...
- 常见排序算法-php
1.归并排序 $a = [1, 4, 6, 8, 10, 14, 16]; $b = [2, 3, 5, 8, 9, 11]; function merge_sort($a, $b) { $a_i = ...
- storm相关技术
There are two kinds of nodes on a Storm cluster: the master node and the worker nodes. 有两种节点,主节点和wor ...