vue 选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<title></title>
<style type="text/css">
.active{
color: red; border-bottom: 1px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li
v-for="(index,items) in tabs"
:class="{active:index == num}"
@click="tab(index)">{{items}}
</li>
</ul>
<div class="tabCon">
<div
v-for='(index,itemCon) in tabContents'
v-show=" index == num">{{itemCon}}
</div>
</div>
</div>
<!--这里是js代码-->
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
tabs: ["标题一", "标题二","标题三"],
tabContents: ["内容一", "内容二","内容三"],
num:0
},
methods: {
tab(index) {
console.log(index)
this.num = index;
}
}
});
</script>
</body>
</html>
vue 选项卡的更多相关文章
- vue 选项卡(转载)
!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-e ...
- 看JQ时代过来的前端,如何转换思路用Vue打造选项卡组件
前言 在Vue还未流行的时候,我们都是用JQuery来封装一个选项卡插件,如今Vue当道,让我们一起来看看从JQ时代过来的前端是如何转换思路,用数据驱动DOM的思想打造一个Vue选项卡组件. 接下来, ...
- vue的选项卡功能
选项卡:点击不同的按钮会显示不同的内容 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- vue调试神器vue-devtools安装
vue-devtools安装 vue-devtools是一款用来调试Vue应用的Chrome插件,可极大提高开发者调试项目效率,接着我们说一下如何下载安装这个插件; 一. 从chrome商店直接下载安 ...
- day 73 初学vue (1)
前情提要: vue 框架的初学习, 主要是,指令,属性,函数,计算属性,监听属性,钩子,生命周期,过滤器,阻止事件和综合案例todo list 学习准备,感谢学习资源: vue 官网:https:// ...
- Vue(二):调试神器vue-devtools安装和使用
前言 vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率.接下来我们就介绍一下vue-devtools的安装. 安装 1.chrome商店直 ...
- vue+nodejs+express+mysql 建立一个在线网盘程序
vue+nodejs+express+mysql 建立一个在线网盘程序 目录 vue+nodejs+express+mysql 建立一个在线网盘程序 第一章 开发环境准备 1.1 开发所用工具简介 1 ...
- vue样式操作与事件绑定
Vue笔记 1 Vue实例 (VM) var vm = new Vue({ el:'#app', //挂载元素 //数据 data: { title:'值', ...
- Chrome Vue Devtools插件安装和使用
安装:fq后在chrome应用商店搜索 Vue Devtools并安装,安装成功后浏览器右上角有vue的图标 安装完毕后,打开含有vue框架的网站,这是vue图标会变亮,进入开发者工具,再右侧vue选 ...
随机推荐
- 【182】SeaDAS 相关处理
load:Command mode procedure for reading data and data attributes into memory and making it available ...
- SOLID总结(未完待续)
SOLID原则是著名的面向对像设计五原则,之所以要引入这些原则,是为了给以防止代码腐化而进行的重构活动定下切实可行的目标. 随着系统开发的进行,产品代码不可避免地会不断腐化,就算在开发过程中很好地应用 ...
- HDU4418:Time travel(高斯消元+期望)
传送门 题意 一个人在数轴上来回走,以pi的概率走i步i∈[1, m],给定n(数轴长度),m,e(终点),s(起点),d(方向),求从s走到e经过的点数期望 分析 设E[x]是人从x走到e经过点数的 ...
- 洛谷 P1083 借教室【二分+差分/线段树】
二分mid,然后用1~mid的操作在差分序列上加减,最后把差分序列前缀和起来,看是否有有超过初始r值的 #include<iostream> #include<cstdio> ...
- Python unittest基本框架组成(1)
Python的标准库——unittest(可以实现自动化测试框架的搭建) python unittest四大组成“元件”: test fixture(测试脚手架)——测试代码的运行环境,指测试准备前和 ...
- jenkins软件工具部署
Jenkins服务软件的安装部署 1.我们在linux安装部署Jenkins的时候,因为jenkins是一个java web程序,所以首先要保证linux系统上已经安装配置好java JDK环境,并安 ...
- 题解报告:hdu 1789 Doing Homework again(贪心)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1789 Problem Description Ignatius has just come back ...
- 影响TCP连接寿命的因素
NAT超时 大部分移动无线网络运营商都在链路一段时间没有数据通讯时,会淘汰 NAT 表中的对应项,造成链路中断.NAT超时是影响TCP连接寿命的一个重要因素(尤其是国内),所以客户端自动测算NAT超时 ...
- CoreText的使用方法
- (void)draw { CGContextRef context = UIGraphicsGetCurrentContext(); NSMutableAttributedString *attr ...
- 219 Contains Duplicate II 存在重复 II
给定一个整数数组和一个整数 k,判断数组中是否存在两个不同的索引 i 和 j,使 nums [i] = nums [j],并且 i 和 j 的绝对差值最大为 k. 详见:https://leetcod ...