vue实现的简单的选项卡

下图是用vue实现的一个简单的一个选项卡案例：

选项卡

通过以前的文章可知@click指令是给元素添加事件的，而v-if="表达式"中，表达式的值如果为true则控制显示。所以在data添加了一条数据num:1,而通过@click给选线卡添加了改变num值的单击事件，而当v-if="num==()"num==()为真的时候，选项卡内容则对应显示，这样选项卡的功能就实现了。

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 面试题
    前端开发面试题 面试题目： 根据你的等级和职位的变化，入门级到专家级，广度和深度都会有所增加。 题目类型： 理论知...
    怡宝丶阅读 2,630评论 0赞 7
  • 批处理学习及实际应用
    个人学习批处理的初衷来源于实际工作；在某个迭代版本有个BS（安卓手游模拟器）大需求，从而在测试过程中就重复涉及到...
    Luckykailiu阅读 4,829评论 0赞 11
  • 十二、事件
      JavaScript 与 HTML 之间的交互是通过事件实现的。   事件，就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,581评论 1赞 11
  • vue.js基础知识整理
    1. Vue 实例 1.1 创建一个Vue实例 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实...
    王童孟阅读 1,046评论 0赞 2
  • bash
    官网 中文版本 好的网站 Content-type: text/htmlBASH Section: User ...
    不排版阅读 4,539评论 0赞 5