vue（5）联动+tab页
来自：https://juejin.im/post/5a0c191f6fb9a04514639419
1、联动
新增 <input v-model="msg" />
<div id="app">
<!-- 模板，用于展示数据 -->
{{msg}}<br/>
<input v-model="msg" />
</div>
效果
当删除/修改/新增 文本框中的字符时，上边的也会跟着一起变。
2、选项卡
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
body {
font-family: "Microsoft YaHei";
} #tab {
width: 600px;
margin: 0 auto;
} .tab-tit {
font-size: 0;
width: 600px;
} .tab-tit a {
display: inline-block;
height: 40px;
line-height: 40px;
font-size: 16px;
width: 25%;
text-align: center;
background: #ccc;
color: #333;
text-decoration: none;
} .tab-tit .cur {
background: #09f;
color: #fff;
} .tab-con div {
border: 1px solid #ccc;
height: 400px;
padding-top: 20px;
}
</style>
</head> <body>
<div id="tab">
<div class="tab-tit">
<!--点击设置curId的值 如果curId等于0，第一个a添加cur类名，如果curId等于1，第二个a添加cur类名，以此类推。添加了cur类名，a就会改变样式 @click,:class ,v-show这三个是vue常用的指令或添加事件的方式-->
<a href="javascript:;" @click="curId=0" :class="{'cur':curId===0}">html</a>
<a href="javascript:;" @click="curId=1" :class="{'cur':curId===1}">css</a>
<a href="javascript:;" @click="curId=2" :class="{'cur':curId===2}">javascript</a>
<a href="javascript:;" @click="curId=3" :class="{'cur':curId===3}">vue</a>
</div>
<div class="tab-con">
<!--根据curId的值显示div,如果curId等于0，第一个div显示，其它三个div不显示。如果curId等于1，第二个div显示，其它三个div不显示。以此类推-->
<div v-show="curId===0">
html
<br/>
</div>
<div v-show="curId===1">
css
</div>
<div v-show="curId===2">
javascript
</div>
<div v-show="curId===3">
vue
</div>
</div>
</div>
</body> <script>
new Vue({
el: '#tab',
data() {
return {
curId: 0
}
},
computed: {},
methods: {},
mounted: function () {
}
})
</script>
</html>
vue（5）联动+tab页的更多相关文章
- vue + element-ui 制作tab切换（切换vue组件，踩坑总结）
本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件. 1.vue如何使用element-ui 上一篇文章已经分享了如何在vue中使用eleme ...
- 基于Vue开发的tab切换组件
github地址:https://github.com/MengFangui/VueTabSwitch 1.index.html <!DOCTYPE html> <html lang ...
- 【vue】vue中实现标签页
前言 tab标签页实现很多, 纯css实现, js实现等, 外加一些特殊动画. vue中实现标签页实现 keep-alive标签和is特性 vue-router中嵌套路由 is特性实现(推荐) 优点: ...
- SPA项目开发之tab页实现
实现思路及细节 1.利用前面博客所讲的Vuex的知识:定义几个变量 Options:存放tab页对象的容器(主要是路由路径以及tab页的名字) activeIndex:被激活的tab页路由路径 sho ...
- JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享（你值得拥有）
前言:最近园子里多了许多谈语言.谈环境.谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵.提升自己的技术才是王道.之前博主分享过多篇bootstrap组件的文章,引起了很多园友的关注和支持,看 ...
- 使用CSS和jQuery实现tab页
使用jquery来操作DOM是极大的方便和简单,这儿只是简单的用一个使用css和jquery来实现的tab页来简单介绍一些jQuery的一些方便使用的方法,下面是html文件: <!DOCTYP ...
- 在bootstrap ace样式框架上修改的后台管理型模板(Tab页后台管理模板)
后台管理模板开始用frameset布局,但是有时候会遮挡比如上面导航或者左边导航的二级三级弹出菜单,因为宽度被限制了,所以有时候就用easyui或者ext的,但是样式不好看,然后看到了bootstra ...
- jquery实现tab页切换显示div
1.jQuery实现tab切换显示代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &q ...
- 自制tab页
没事自己弄着玩,写了个tab页.不要当真.想看就看看.希望相互学习. 效果预览:html源码: <!DOCTYPE html> <html lang="en"&g ...
随机推荐
- opencv生成灰度图并保存
#include <opencv2/opencv.hpp>#include <iostream> using namespace cv;using namespace std; ...
- setex()
设置值和有效期 $redis->setex($key, $expire, $value);//$expire,有效期,单位秒 相当于 SET key value//设置键值 EXPIRE key ...
- .replace(/-/g,"/")的用法
/-/g正则表达式 g 代表 global 全部替换 var str1 ="2012-08-12 23:13"; str1 = str1.replace(/-/g,& ...
- idea中解决spring配置文件命名空间（namespace）出现红色问题
在配置dubbo项目时,开始时经常出现dubbo错误,如下图: 修改方式已经出现在提示中了,具体这个更改: 1. 解压dubbo-2.5.4.jar这样的包(具体看你使用的版本),选择:META-IN ...
- 小小c#算法题 - 10 - 求树的深度
树型结构是一类重要的非线性数据结构,树是以分支关系定义的层次结构,是n(n>=0)个结点的有限集.关于树的基本概念不再作过多陈述,相信大家都有了解,如有遗忘,可翻书或去其他网页浏览以温习. 树中 ...
- Hexo下Next主题配置与优化
使用Next主题 在这里Downloads Next主题代码 将下载的代码放在myBlog/theme/next目录下 设置站点myBlog/_config.yml的theme字段值为next 生成新 ...
- eclipse 链接 hadoop - 问题
问题:在没有联网时可以连接,当联网时无法链接hdfs 解决:重启hadoop各种守护进程 解析:因该跟host文件中有映射ip有关,有待继续解决......(先留个底)
- position用法
fixed的用法 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- requests模块demo
import urllib.request import requests from requests.auth import HTTPBasicAuth from requests.auth imp ...
- Vue.js 的几点总结Watchers/router key/render
Vue.js 的几点总结,下面就是实战案例,一起来看一下. 第一招:化繁为简的Watchers 场景还原: 1 2 3 4 5 6 7 8 created(){ this.fetchPostLis ...