Vue.js实现tab切换效果


Posted in Javascript onJuly 24, 2019

Vue是一个小巧轻便的JavaScript库。它有一个简单易懂的API,能够让开发者在开发web应用的时候更加简易便捷。实际上,一直让Vue引以为豪的是它的便捷性、执行力、灵活性。

目前在学习Vue.js。在学习的时候需要把手动操作DOM的思维去掉,因为Vue是数据驱动,不需要手动操作DOM。他通过一些特殊的hmtl语法,将DOM和数据绑定起来。一旦创建了绑定,DOM就会和数据保持同步,每当变更了数据,DOM也会相应的发生改变,更新。

下面是我用vue.js来实现的tab切换功能。

<!--这里是html结构-->
<div id="app">
    <ul>
      <li 
      v-for="(item,index) in tabs" 
      :class="{active:index == num}"
       @click="tab(index)">{{item}}</li>
    </ul>
    <div class="tabCon">
      <div 
      v-for='(itemCon,index) 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: 1
  },
  methods: {
    tab(index) {
      this.num = index;
    }
  }
});
</script>

使用vue.js实现tab切换很简单,先使用v-for把数据遍历渲染到页面上,v-for中有一个index表示索引,将index作为参数传入到tab(index)这个函数中,在data中定义一个num变量,在title中如果index==num,这个title就会添加一个acive的class。当然,这个num是需要在tab()这个函数中不断改变的,需要将传入的索引值赋值给num,这样在.tabCon里,我们就可以用v-show做下判断。v-show=”index==num”,如果等于的话,当前的内容就会显示。否则隐藏。

我感觉学习vue,首先把以前的那种传统思维转变过来是主要的,其次就是不断实践,不断的敲代码,才可以更深入的学习Vue.js。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
分享14个很酷的jQuery导航菜单插件
Apr 25 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
Dec 12 Javascript
js Dialog 去掉右上角的X关闭功能
Apr 23 Javascript
javascript实现的多个层切换效果通用函数实例
Jul 06 Javascript
jquery制作图片时钟特效
Mar 30 Javascript
JS中递归函数
Jun 17 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 Javascript
JS加载解析Markdown文档过程详解
May 19 Javascript
在Echarts图中给坐标轴加一个标识线markLine
Jul 20 Javascript
vue自定义组件实现双向绑定
Jan 13 Vue.js
javascript面向对象三大特征之多态实例详解
Jul 24 #Javascript
javascript面向对象三大特征之继承实例详解
Jul 24 #Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 #Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 #Javascript
javascript关于“时间”的一次探索
Jul 24 #Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 #Javascript
解决vue-cli webpack打包开启Gzip 报错问题
Jul 24 #Javascript
You might like
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
PHP Opcache安装和配置方法介绍
2015/05/28 PHP
浅谈PHP中其他类型转化为Bool类型
2016/03/28 PHP
PHP模板引擎Smarty中的保留变量用法分析
2016/04/11 PHP
filemanage功能中用到的common.js
2007/04/08 Javascript
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
replace()方法查找字符使用示例
2013/10/28 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
JS实现DOM删除节点操作示例
2018/04/04 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
Django跨域请求问题的解决方法示例
2018/06/16 Python
Python爬虫的两套解析方法和四种爬虫实现过程
2018/07/20 Python
Python日期时间Time模块实例详解
2019/04/15 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
T3官网:头发造型工具
2019/12/26 全球购物
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
Why we need EJB
2016/10/20 面试题
网游商务专员求职信
2013/10/15 职场文书
市场营销求职信范文
2014/02/21 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
颐和园导游词
2015/01/30 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python