Menu

js组件tabs实现选项卡切换效果

Vue.js组件tabs完结选项卡切换效果,vue.jstabs

前几日给大家享用多个小颖本身写的vue组件,因为小颖也才接触vue没多短期,假若有哪些不足的地点,希望我们建议来,小颖加以勘误.以下正是现实性哪些达成tabs啦。

调用示例:

<template>
<div class="tabs-contents">
<!-- 调用tabs组件 -->
 <tabs :flag.sync='tabsShowFlag' :navtitle='navTitle' :navdata='navData'>
 <div class="tabs-body">
 <div v-if='navData[0].showFlag>0'>
  <div class="one-content">
  <p>二十国集团领导人第十一次峰会将于9月4日至5日在浙江杭州举行。峰会主题为“构建创新、活力、联动、包容的世界经济”。二 十国集团成员和嘉宾国领导人及有关国际组织负责人将应邀与会。中国国家主席将出席并主持会议,并出席金砖国家领导人非正式会晤等有关活动。二十国集团工商峰会将于9月3日至4日在浙江杭州举行。中国国家主席将出席开幕式并发表主旨演讲。部分二十国集团成员和嘉宾国领导人及有关国际组织负责人将应邀与会。 </p>
  </div>
 </div>
 <div v-if='navData[1].showFlag>0'>
  <div class="two-content">
  <p>党员领导干部</p>
  <div>
   盘点历届奥运会中国乒乓球队精彩比赛瞬间。2016里约奥运会乒乓球男团半决赛,中国3-0韩国晋级,张继科遭遇韩国小将郑荣植的顽强阻击,在两度落后的情况下,苦战五局才得以3:2涉险过关。图为张继科精彩比赛瞬间。
  </div>
  </div>
 </div>
 <div v-if='navData[2].showFlag>0'>
  <label class="glyphicon glyphicon-asterisk"></label>

  <div class="two-content">
  <p>都说程序员有三宝:人傻,钱多,死得早。博主身边的程序“猿”一大半应了这三宝,这从侧面说明了一个问题,只有理性是过不好日子的。朋友们应该把工作与生活分开,让生活变得感性,让工作变得理性,两者相提并行,岂不快哉。咳,话题扯得有点远,今天博主给大家写一篇关于css如何设置select、radio 、 checkbox 、file样式的问题,这里不涉及模拟框,仅介绍原生情况下如何做到自定义样式,废话不多说,赖次够!</p>
  <div>
   北京时间8月16日早上,中国游泳队抵达北京,队员们一走出到达出口就被热情的粉丝们蜂拥围堵,尤其是宁泽涛、傅园慧等高人气运动员,更是寸步难行。供图:视觉中国
  </div>
  </div>
 </div>
 <div v-if='navData[3].showFlag>0'>
  <div class="form-horizontal">
  <div class="form-group">
   <label class="col-sm-3 control-label">*姓名:</label>
   <div class="col-sm-2"><input type="text" class="form-control"></div>
  </div>
  </div>
 </div>
 </div>
 </tabs>

</div>
</template>
<script>
import tabs from './yezitabs.vue' //引入组件
export default {
 components: {
 tabs,
 },
 ready: function() {
 },
 methods: {
 },
 data() {
 return {
  tabsShowFlag:true,
  navTitle:'新闻',
  navData: [{
  key: 'biubiu',
  showFlag: 1,
  }, {
  key: '豆豆打豆豆',
  showFlag: -1,
  }, {
  key: '单身汪',
  showFlag: -1
  },{
  key: '喵嘞个咪',
  showFlag: -1
  }],
 }
 },
}
</script>
<style scoped>
</style>

实现tabs:

<template>
<div class="tabs-content" v-if='flag'>
 <div class="top">
 <div class="title">{{navtitle}}</div>
 <ul class="nav nav-tabs">
  <li v-for='(navindex,nav) in navdata' class="nav-li" v-bind:class='{active:nav.showFlag>=0}' @click='keyShowFun(navindex)'>
  <a href="#">{{nav.key}}</a>
  </li>
 </ul>
 </div>
 <div class="v-tabs-item">
 <slot></slot>
 </div>
</div>
</template>
<script>
export default {
 props: {
 flag: {
  type: Boolean,
  required: true,
  twoWay: true
 },
 navtitle: {
  type: String,
  default: ''
 },
 navdata: {
  type: Array,
  required: true,
 },
 },
 components: {

 },
 ready: function() {

 },
 methods: {
 keyShowFun:function(index){
  let _this=this;
  _this.navdata.forEach(function(item){
  item.showFlag=-1;
  });
  _this.navdata[index].showFlag=1;
 }
 },
 data() {
 return {
 }
 },
}
</script>
<style scoped>

</style>

效果图:

图片 1

以上就是本文的全体内容,希望对我们的读书抱有帮忙,也冀望大家多多辅助帮客之家。

后天给我们享受三个小颖本身写的vue组件,因为小颖也才接触vue没多长期,假诺有啥不足的地点,希…

调用示例:

<template>
<div class="tabs-content" v-if='flag'>
 <div class="top">
 <div class="title">{{navtitle}}</div>
 <ul class="nav nav-tabs">
 <li v-for='(navindex,nav) in navdata' class="nav-li" v-bind:class='{active:nav.showFlag>=0}' @click='keyShowFun(navindex)'>
 <a href="#">{{nav.key}}</a>
 </li>
 </ul>
 </div>
 <div class="v-tabs-item">
 <slot></slot>
 </div>
</div>
</template>
<script>
export default {
 props: {
 flag: {
 type: Boolean,
 required: true,
 twoWay: true
 },
 navtitle: {
 type: String,
 default: ''
 },
 navdata: {
 type: Array,
 required: true,
 },
 },
 components: {

 },
 ready: function() {

 },
 methods: {
 keyShowFun:function(index){
 let _this=this;
 _this.navdata.forEach(function(item){
 item.showFlag=-1;
 });
 _this.navdata[index].showFlag=1;
 }
 },
 data() {
 return {
 }
 },
}
</script>
<style scoped>

</style>

本文已被收拾到了《Vue.js前端组件学习课程》,接待咱们学习阅读。

图片 2

后天给大家享受多个小颖自身写的vue组件,因为小颖也才接触vue没多短时间,借使有如何不足的地点,希望我们建议来,小颖加以改良.以下正是切实可行怎么着落到实处tabs啦。

<template>
<div class="tabs-contents">
<!-- 调用tabs组件 -->
 <tabs :flag.sync='tabsShowFlag' :navtitle='navTitle' :navdata='navData'>
 <div class="tabs-body">
 <div v-if='navData[0].showFlag>0'>
 <div class="one-content">
 <p>二十国集团领导人第十一次峰会将于9月4日至5日在浙江杭州举行。峰会主题为“构建创新、活力、联动、包容的世界经济”。二 十国集团成员和嘉宾国领导人及有关国际组织负责人将应邀与会。中国国家主席将出席并主持会议,并出席金砖国家领导人非正式会晤等有关活动。二十国集团工商峰会将于9月3日至4日在浙江杭州举行。中国国家主席将出席开幕式并发表主旨演讲。部分二十国集团成员和嘉宾国领导人及有关国际组织负责人将应邀与会。 </p>
 </div>
 </div>
 <div v-if='navData[1].showFlag>0'>
 <div class="two-content">
 <p>党员领导干部</p>
 <div>
 盘点历届奥运会中国乒乓球队精彩比赛瞬间。2016里约奥运会乒乓球男团半决赛,中国3-0韩国晋级,张继科遭遇韩国小将郑荣植的顽强阻击,在两度落后的情况下,苦战五局才得以3:2涉险过关。图为张继科精彩比赛瞬间。
 </div>
 </div>
 </div>
 <div v-if='navData[2].showFlag>0'>
 <label class="glyphicon glyphicon-asterisk"></label>

 <div class="two-content">
 <p>都说程序员有三宝:人傻,钱多,死得早。博主身边的程序“猿”一大半应了这三宝,这从侧面说明了一个问题,只有理性是过不好日子的。朋友们应该把工作与生活分开,让生活变得感性,让工作变得理性,两者相提并行,岂不快哉。咳,话题扯得有点远,今天博主给大家写一篇关于css如何设置select、radio 、 checkbox 、file样式的问题,这里不涉及模拟框,仅介绍原生情况下如何做到自定义样式,废话不多说,赖次够!</p>
 <div>
 北京时间8月16日早上,中国游泳队抵达北京,队员们一走出到达出口就被热情的粉丝们蜂拥围堵,尤其是宁泽涛、傅园慧等高人气运动员,更是寸步难行。供图:视觉中国
 </div>
 </div>
 </div>
 <div v-if='navData[3].showFlag>0'>
 <div class="form-horizontal">
 <div class="form-group">
 <label class="col-sm-3 control-label">*姓名:</label>
 <div class="col-sm-2"><input type="text" class="form-control"></div>
 </div>
 </div>
 </div>
 </div>
 </tabs>

</div>
</template>
<script>
import tabs from './yezitabs.vue' //引入组件
export default {
 components: {
 tabs,
 },
 ready: function() {
 },
 methods: {
 },
 data() {
 return {
 tabsShowFlag:true,
 navTitle:'新闻',
 navData: [{
 key: 'biubiu',
 showFlag: 1,
 }, {
 key: '豆豆打豆豆',
 showFlag: -1,
 }, {
 key: '单身汪',
 showFlag: -1
 },{
 key: '喵嘞个咪',
 showFlag: -1
 }],
 }
 },
}
</script>
<style scoped>
</style>

效果图:

至于vue.js组件的科目,请大家点击专项论题vue.js组件学习课程举办学习。

以上正是本文的全体内容,希望对大家的求学抱有帮助,也愿意大家多多帮忙脚本之家。

实现tabs:

你恐怕感兴趣的稿子:

  • js完成轻易的可切改选项卡效果
  • js选项卡的兑现格局
  • javascript落到实处tabs选项卡切换效果(自写原生js)
  • JS达成选项卡实例详解
  • 使用vue.js写贰个tab选项卡效果
  • js达成tab选项卡函数代码
  • JQuery
    选项卡效果(JS与HTML的分开)
  • 原生js完结tab选项卡切换
  • Vue.js组件tab达成选项卡切换
  • js达成轻巧选项卡功效
标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图