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选 ...
随机推荐
- 377D
树形dp 就是求每个点到标记的点的最大距离 一个经典模型 有一个巧妙的方法,我们求出以这些关键点的直径,然后每个点到关键点的最大距离就是到直径两端的距离 #include<bits/stdc++ ...
- VS2010打包回顾
1. 在vs2010 选择“新建项目”à“ 其他项目类型”à“ Visual Studio Installerà “安装项目”: 命名为:Setup1 . 这是在VS2010中将有三个文件夹, 1. ...
- HDU 2914 Triangle (Fibnacci 数)
题意:给你一个长度为 n 的木棒,求至少拿掉几根使得剩余的木棒构成不了三角形. 析:为了保证不形成三角形,所以保证两边之和等于最大边是最优,这不就是Fibnacci 数么,由于 n 很小,if-els ...
- Android Debuggerd 简要介绍和源码分析(转载)
转载: http://dylangao.com/2014/05/16/android-debuggerd-%E7%AE%80%E8%A6%81%E4%BB%8B%E7%BB%8D%E5%92%8C%E ...
- Servlet,jsp,jsp的9大内置对象
以servlet作为控制器 1:servlet的生命周期:以下方法都是servlet容器进行调用 1)构造函数:只被调用一次,当项目启动时或者该servlet被容器第一次调用时,会创建servlet实 ...
- shiro错误:Subject does not have permission [user:select]
使用的是jdbcRealm,在数据库中有相应的权限 错误日志: org.apache.shiro.authz.UnauthorizedException: Subject does not have ...
- ACM数论-求组合数
我们利用这个公式求阶乘和逆元求阶: #include<cstdio> const int N = 200000 + 5; const int MOD = (int)1e9 + 7; int ...
- Spring配置文件中未引入dubbo命名空间头部配置而引起的错误案例
问题描述: Spring配置文件中未引入dubbo命名空间的头部配置而引起项目启动时报出如下错误信息: org.springframework.beans.factory.xml.XmlBeanDef ...
- 456 132 Pattern 132模式
给定一个整数序列:a1, a2, ..., an,一个132模式的子序列 ai, aj, ak 被定义为:当 i < j < k 时,ai < ak < aj.设计一个算法,当 ...
- .NET面试题解析(00)-系列文章索引
.NET面试题解析(01)-值类型与引用类型 .NET面试题解析(02)-拆箱与装箱 .NET面试题解析(03)-string与字符操作 .NET面试题解析(04)-类型.方法与继承 .NET面试题解 ...