vue tab切换
<template>
<div class="box">
<ul>
<li v-for="(item,index) in arrText" :key="index" @click="tab(index)" :class='{active:index===num}'>{{item}}</li>
</ul>
<div class="text">
<p v-for="(items,index) in arrConten" :key="index" v-show="index===num">{{items}}</p>
</div>
</div>
</template>
<script type="text/ecmascript-6">
export default {
name: 'planning',
data () {
return {
arrText: ['月落', '乌啼', '霜满天', '江枫', '渔火', '对愁眠'],
arrConten: ['月上柳枝头', '乌鸦啼血猿哀鸣', '霜叶红于二月花', '一江春水向东流','授人以鱼不如授人以渔', '春眠不觉晓'],
num: 0
}
},
methods: {
tab (val) {
console.log(val)
this.num = val
}
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
ul
display flex
justify-content space-around
margin-top 1rem
font-size 0.3rem
li
// background pink
color #8B008B
padding 5px
text-align center
border-radius 3px
cursor pointer
width 17%
.active
color #C67171
border-bottom 2px solid #C67171
// background #C0FF3E
.text
width 100%
height 300px
border 1px solid #ff3341
margin-top 0.5rem
padding 1rem
font-size 0.3rem
</style>
vue tab切换的更多相关文章
- vue tab切换demo
定义tab页面切换的内容 var app=new Vue({ el:'#app', data:{ navTabs:[ { text:"tab1", isActive:true, t ...
- vue tab切换布局
页面 功能 点击tab1和tab2,content内容切换content1和content2 <template> <div> <div class="tab& ...
- vue实现tab切换功能
最近用vue做一个页面的tab功能,经过一查找资料,没用路由,也没用动态组件,完美实现了tab切换功能,效果如下 下面是代码实现,这是模板 <article id="example&q ...
- vue 实现tab切换动态加载不同的组件
vue 实现tab切换动态加载不同的组件 使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...
- vue.cli实现tab切换效果
<template> <div class="cp-select"> <div class="lef ...
- vue + element-ui 制作tab切换(切换vue组件,踩坑总结)
本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件. 1.vue如何使用element-ui 上一篇文章已经分享了如何在vue中使用eleme ...
- VUE 实现tab切换页面效果
一 163邮箱登录tab切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- vue + element-ui 制作tab切换(适用于单页切换不同标记显示不同内容)
本篇文章使用vue结合element开发tab切换单页不同的标记显示不同的内容. 1.安装element-ui npm install element-ui --save 2.在main.js中引入e ...
- vue实现tab切换
需要弄类似tab切换的功能就是一个点击切换上一页下一页的页面 找到这个获得灵感 <!DOCTYPE html> <html lang="en"> <h ...
随机推荐
- python学习笔记之函数的参数
函数的参数有位置参数和关键字参数,位置参数一定要在关键字参数的前面,位置参数的优先级是高于关键字参数的,否则会报错 def my_abs(a,b): print(a) print(b) my_abs( ...
- Rancher的简单部署和使用
Racher相对于k8s还有swarm啥的各有各的好处,没有深入用过,今天把部署和简单使用写下 首先是部署rancher server,一句命令搞定 docker run -d --restart=u ...
- LeetCode OJ 15. 3Sum
题目 Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find all ...
- openwrt多wan限上下行速脚本,基于qosv4,imq模块替换成ifb模块[ZT]
转自: http://www.right.com.cn/forum/thread-169414-1-1.html ,本人未经测试,转来自已备用 由于树莓派2装openwrt官方没有imq模块, 好像说 ...
- week06 09 NodeJS Server as a RPCclient - jayson
nodeserver端的rpcclient 来调用后端backendserver端定义的add等方法 2个server连通 Make NodeJs as a client - Npm jayson 用 ...
- GIS案例学习笔记-明暗等高线提取地理模型构建
GIS案例学习笔记-明暗等高线提取地理模型构建 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 目的:针对数字高程模型,通过地形分析,建立明暗等高线提取模型,生成具有 ...
- github学习心得。哈哈,今天上传了自己的项目!
使用github托管代码 仓库(Repository) 用来存放项目代码,每个项目对应一个仓库.如果有多个项目了就需要多个仓库 收藏(star) 仓库主页star按钮,意思为收藏项目的人数 复制克隆项 ...
- C++与java编程区别(一)
转载自http://blog.sina.com.cn/s/blog_75f4e17c0101295o.html C++ HelloWorld main.cpp #include< iostrea ...
- 源码编译安装Python3及问题解决
https://chowyi.com/%E6%BA%90%E7%A0%81%E7%BC%96%E8%AF%91%E5%AE%89%E8%A3%85Python3%E5%8F%8A%E9%97%AE%E ...
- react学习入门
先在在学习react,react是faceBook推出的框架,因为虚拟DOM使页面性能提高很大,特别react Native非常适合移动端,现做一个学习总结: 1.react 获取DOM的两种方式是R ...