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选 ...
随机推荐
- jquery $(function(){}) $(document).ready(function(){}); (function(){}); 的区别以及作用
$(function)是$(document).ready(function(){});的简写方法 用来在DOM加载完之后执行一系列预先定义好的函数 (function(){});表示一个匿名函 ...
- OC：数组排序、时间格式化字符串
数组排序 //不可变数组的排序 NSArray * arr = [NSArray arrayWithObjects:@"hellow", @"lanou", @ ...
- asp.net mvc 多字段排序
以下代码可实现多字段排序,通过点击列标题,实现排序. 控制器: public ActionResult Index(string sortOrder) { ViewBag.FirstNameSortP ...
- Ruby Numeric类
Numeric类 Numeric ---------> Integer ---------> Fixnum ...
- python pep8 命令规范
命名规范:总体原则,新编代码必须按下面命名风格进行,现有库的编码尽量保持风格.1 尽量单独使用小写字母‘l’,大写字母‘O’等容易混淆的字母.2 模块命名尽量短小,使用全部小写的方式,可以使用下划线. ...
- bzoj 2005: [Noi2010]能量采集【莫比乌斯反演】
注意到k=gcd(x,y)-1,所以答案是 \[ 2*(\sum_{i=1}^{n}\sum_{i=1}^{m}gcd(i,j))-n*m \] 去掉前面的乘和后面的减,用莫比乌斯反演来推,设n< ...
- bzoj 4813: [Cqoi2017]小Q的棋盘【树形dp】
这么简单的dp我怎么没想到x2 f为从这个点出发后回到这个点最多能走过的点,g为从这个点出发后不回到这个点最多能走过的点,注意g有两种转移:g[u][k]=max(g[u][k],f[u][k-j-1 ...
- Unix\Linux | 总结笔记 | man帮助
0.目录 手册页分类说明 man手册中的段落说明 1. man手册页分类 man1 普通用户可以执行的命令帮助 man2 系统调用.内核函数的说明帮助 man3 库函数说明帮助 ma ...
- 前端基础jQuery
jQury jQuery 是一个 JavaScript 函数库,jQuery 极大地简化了 JavaScript 编程. jQuery库包含以下功能: HTML 元素选取 HTML 元素操作 CSS ...
- Light oj 1002 Country Roads (Dijkstra)
题目连接: http://www.lightoj.com/volume_showproblem.php?problem=1002 题目描述: 有n个城市,从0到n-1开始编号,n个城市之间有m条边,中 ...