vue实现一个简单的选项卡
用vue来实现一个小的选项卡切换，比之前要简单、方便很多。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/vue.min.js"></script>
<style>
button{
width:40px;
height:30px;
text-align:center;
border:none;
cursor: pointer;
}
.active{
background:red;
color:#fff;
border:none;
}
</style>
</head>
<body>
<div id="app">
<button
v-for="(val,key) in box"
@click="changes(key)"
:class="{active:key == num}"
>{{key+1}}</button>
<div
v-for="(val,key) in box"
v-show="key==num"
>{{val}}</div>
</div>
<script>
/*
运用知识点：
v-for
v-on,简写@
v-bind简写:
v-show
思路：
循环数据，当点击时候，把key传到changes方法中，然后num赋值给active
循环数组，只要box中key等于num就让它显示出来
*/
new Vue({
el:'#app',
data:{
box:['俄克拉荷马','萨克拉门托','明尼苏达'],
num:0
},
methods:{
changes(key){
this.num = key;
}
}
});
</script>
</body>
</html>
vue实现一个简单的选项卡的更多相关文章
- 使用jQuery.extend创建一个简单的选项卡插件
选项卡样式如图,请忽略丑陋的样式,样式可以随意更改 主要是基于jquery的extend扩展出的一个简单的选项卡插件,注意:这里封装的类使用的是es6中的class,所以不兼容ie8等低版本浏览器呦! ...
- 【Css】一个简单的选项卡
这次来做一个简单的选项卡. 选项卡其实就分3个部分:html代码,用于显示的内容:css代码,用于显示的样式:javascript代码,用于点击事件. 老规矩,先写一个html坯子. <!DOC ...
- JS入门学习，写一个简单的选项卡
/* 经过昨天一整天的纠结和摸索.总结下学习初期我最致命的几个问题…… 1.var oDiv = document.getElementById(''); 一定要多输,熟悉后o u什么的字母别搞 ...
- 用 Vue 做一个简单的购物app
前言 最近在学习Vue的使用.看了官方文档之后,感觉挺有意思的.于是着手做了一个简单的购物app.h5 与原生 app 交互的原理这是我第一次在这个网站上写分享,如有不当之处,请多多指教. 一整个项目 ...
- 使用Laravel 和 Vue 构建一个简单的SPA
本教程是作者自己在学习Laravel和Vue时的一些总结,有问题欢迎指正. Laravel是PHP的一个框架,Vue是前端页面的框架,这两个框架如何结合起来构建一个SPA(Single Page Ap ...
- 用vue实现一个简单的时间屏幕
前言 去年用了一个小的 app,叫做 一个木函,本来想着用来做动画优化就删掉了的,不过看到他有个时间屏幕的小工具,就点进去看了下,觉得挺好玩的,就想着能不能自己实现一下. ps: 闲话不多说,先上例子 ...
- [Vue]写一个简单的文件上传控件
这篇将介绍如何写一个简单的基于Vue+Element的文件上传控件. 控件将具有 1. 上传队列的列表,显示文件名称,大小等信息,可以显示上传进度实时刷新 2. 取消上传 使用Element的u ...
- vue封装一个简单的div框选时间的组件
记录一下我前段时间封装的一个vue组件吧.技术需要积累,有时间我把我之前写的还不错的组件都开源出来.并尝试vue和react 两种方式的组件封装.今天简单写下鼠标框选div选中效果的封装吧. div框 ...
- 用Vue实现一个简单的图片轮播
本文已收录至https://github.com/likekk/studyBlog欢迎大家star,共同学习,共同进步.如果文章有错误的地方,欢迎大家指出.后期将在将GitHub上规划前端学习的路线和 ...
随机推荐
- python matplotlib绘图
import numpy as np import matplotlib.pyplot as plt from scipy.constants.constants import alpha from ...
- 关于EXCEL if、countif 在查找数据的用法
最近被其他部门的同事教导使用excel.突然觉得以前用代码切来切去的东西,和频繁比对的数据原来是用excel就能那么方便的算出,瞬间感觉打开了新世界的大门. 先说if和countif结合使用,来判断一 ...
- BZOJ4001 TJOI2015概率论（生成函数+卡特兰数）
设f(n)为n个节点的二叉树个数,g(n)为n个节点的二叉树的叶子数量之和.则答案为g(n)/f(n). 显然f(n)为卡特兰数.有递推式f(n)=Σf(i)f(n-i-1) (i=0~n-1). 类 ...
- ZOJ2836-Number Puzzle-容斥原理
依次考虑一个数的倍数,两个数的倍数(lcm),三个数的倍数(lcm)... 会发现有这么一个规律,奇数个数时要加上情况数,偶数个数时要减去情况数. 一种只有10个数,用二进制枚举所有情况即可. #in ...
- Spring IOC和Spring AOP的实现原理(源码主线流程)
写在前面 正本文参考了<spring技术内幕>和spring 4.0.5源码.本文只描述原理流程的主线部分,其他比如验证,缓存什么可以具体参考源码理解. Spring IOC 一.容器初始 ...
- 【刷题】BZOJ 2407 探险
Description 探险家小T好高兴!X国要举办一次溶洞探险比赛,获奖者将得到丰厚奖品哦!小T虽然对奖品不感兴趣,但是这个大振名声的机会当然不能错过! 比赛即将开始,工作人员说明了这次比赛的规则: ...
- Leetcode 283.移动零 By Python
思路 我们可以用python的list comprehension来取出所以非0的元素,而且这样取出来会保持原有的相对顺序,再统计先后变化的长度,补上相应的0即可 代码 class Solution( ...
- SharePoint 2013 APP 开发示例 （六）服务端跨域访问 Web Service （REST API）
上个示例(SharePoint 2013 APP 开发示例 (五)跨域访问 Web Service (REST API))是基于JavaScript,运行在web browser内去访问REST AP ...
- suoi46 最大和和 (线段树)
<Segment tree Beats!>,反正我不会 #include<bits/stdc++.h> #define pa pair<int,int> #defi ...
- Hadoop、Hbase基本命令及调优方式
HDFS基本命令 接触大数据挺长时间了,项目刚刚上完线,趁着空闲时间整理下大数据hadoop.Hbase等常用命令以及各自的优化方式,当做是一个学习笔记吧. HDFS命令基本格式:Hadoop fs ...