Vue实现选项卡效果

最新推荐文章于 2022-09-19 20:37:00 发布
最新推荐文章于 2022-09-19 20:37:00 发布
阅读量312 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/class1/p/11011928.html
版权



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <script src="../vue.js"></script>
    <style>
*{
 padding: 0px;
  margin: 0px;
 }
 
 .wrapper{
  margin: 50px auto;
  width: 450px;
 height:400px;
  border: 1px solid #000;
  }
  .nav{
  list-style: none;
  width: 450px;
  height: 80px;
  font-size: 0px;
  }
 .nav li{
  width: 148px;
 height:80px;
  font-size: 16px;
  border: 1px solid #000;
 display: inline-block;
  text-align: center;
 line-height: 80px
 }
 .content div{
width: 450px;
height: 320px;
text-align: center;
  line-height: 320px;
 background:pink;
 }
  .primary{
 background:red
 }
 .default{
 background:#aaa;
 }
 </style>
</head>
 

<body>
  <div id='app'>
  <div class='wrapper'>
 <ul class='nav'>
  <li v-for='(item,index) in list'
 @click='sel(index)'
:class='index==selIndex?"primary":"default"'
 >{{item.title}}</li>
 </ul>
  <div class='content'>
  <div v-for='(item,index) in list'
  v-if='index==selIndex'
  >{{item.info}}</div>

     </div>
    </div>
  </div>



<script>
  new Vue({
    el:'#app',
    data:{
      list:[{title:'荷花',info:'小荷才露尖尖角，早有蜻蜓立上头'},
            {title:'菊花',info:'采菊东篱下，悠然见南山'},
             {title:'梅花',info:'墙角数枝梅，凌寒独自开'}],
       selIndex:0
     },
    methods: {
     sel(index){
         this.selIndex=index
        }
    },
 })

</script>
</body>
</html>

转载于:https://www.cnblogs.com/class1/p/11011928.html

anghedui5787
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 选项卡效果
weixin_45743799的博客
11-16 316
用Vue实现选项卡效果。 效果演示 点击CSS 点击Vue 看起来是不是有点菜单导航的感觉，下面跟随我一起来一探究竟？ 代码演示 **注意：**引入Vue.js架包 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue选项卡...
Vue-案例-实现简单的选项卡效果
Joker.M的博客
07-23 461
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <meta name="viewport" content="maximum-scale...
vue实现选项卡及选项卡切换效果
08-27
主要介绍了vue实现选项卡选项卡切换效果,这里的Vue以单文件的形式引入，另外代码在实现上会一步步的进行优化。需要的朋友可以参考下
vue--选项卡效果实现
wang159477的博客
04-10 674
文章目录二、2种方法可以实现1.效果一2.效果二 二、2种方法可以实现 1.效果一 代码如下（示例）： <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="
选项卡效果实现-vue
JackieDYH的博客
06-01 484
效果一 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>tab</title>.
vue动态组件实现选项卡切换效果
12-29
本文实例为大家分享了vue动态组件实现选项卡切换的具体代码，供大家参考，具体内容如下 导航按钮： <p click=a><router to='/collectnewcars'>新车</router></p> <p click=a><router to='/...
vue选项卡
qq_35327397的博客
01-04 544
<div id="app" v-cloak> <ul> <li v-if="item=='a'?true:false">01</li> <li v-else-if="item=='b'?true:false">02</li> <li v-else-if="item=='c'?true:false">02.5</l
Vue学习--基础（1）--实现选项卡效果
sinat_28753227的博客
02-25 1111
vue实现选项卡效果： 1.页面布局代码： <div id="app"> <div class="tab"> <ul> <li v-on:click="change(index)" :class="currentIndex==index?'active':''" :key="item.id" v-for="(item,index) in list"&gt
如何用Vue实现选项卡效果以及Vue知识点
最新发布
m0_55734030的博客
09-19 2619
概念：Vue是渐进式 JavaScript框架，用于构建用户界面的渐进式框架。Vue的创始人是尤雨溪，2014年Vue.js发布→2016年Vue2.x发布⭐→2022年Vue3.x发布。虽然现在Vue3已经发布，但是还是要把Vue2学会，Vue2是很重要的，建议学完Vue2再学Vue3。vue的官网Vue官网。
vue实现选项卡案例
yang68668的博客
12-30 443
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
Vue.js实现tab切换效果
热门推荐
Coding_Jia的博客
05-24 5万+
Vue是一个小巧轻便的JavaScript库。它有一个简单易懂的API，能够让开发者在开发web应用的时候更加简易便捷。实际上，一直让Vue引以为豪的是它的便捷性、执行力、灵活性。 目前在学习Vue.js。在学习的时候需要把手动操作DOM的思维去掉，因为Vue是数据驱动，不需要手动操作DOM。他通过一些特殊的hmtl语法，将DOM和数据绑定起来。一旦创建了绑定，DOM就会和数据保持同步，每当变更了
Vue实现的简单选项卡
林飞的梦呓
04-25 2万+
App.vue<template> <div id="app"> <Tab/> </div> </template><script> import Tab from './components/Tab'export default { name: 'App', components: { Tab } } </script><style> ul, li {
vue 选项卡可以滑动_vue实现选项卡及选项卡切换效果
weixin_36389468的博客
12-23 1867
这里不跟大家再去把Vue文档上的一些指令用法或者基础知识再复述一遍，既然是从入门到实战，我直接将平时项目中需要实现的一些效果拆分成模块。你们遇到了相关的指令或者不知道怎么用的方法自己对着文档去查，再回过头来看我的实现代码。记住，通读Vue文档真的很重要，很重要！这里的Vue以单文件的形式引入，另外代码在实现上会一步步的进行优化，客官不要着急！下面是一个样式稍微丑陋，但功能OK的选项卡。Vue实现选...
使用vue简单实现tab选项卡切换效果分享
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
04-27 1131
<style scoped> .menu{ display: flex; align-items: center; } .menu span{ color: #444950; font-size: 12px; line-height: 24px; background: #f5f6f7; padding: 0 6px; display: block; cursor: pointer; } .sho
vue实现选项卡功能
h5_since的博客
11-04 2594
template代码 <ul class="swiper-wrapper" id="wrapper" style="transition-duration: 0ms;"> <li class="swiper-slide swiper-slide-active" :class="{active: activea...
vue tab切换_基于Vuejs和Bulma开发的新兴开源UI组件库——Vue-Blu
weixin_39631295的博客
11-29 253
介绍Vue-Blu是基于Vuejs和Bulma开发的开源UI组件库。旨在为PC端的前端开发(特别是中后台产品)提供一个快速且灵活的解决方案。Bulma是一个基于Flexbox的免费开源CSS框架，已有200,000多名开发人员使用；笔者曾经也介绍过这一款css框架，目前star数已突破38.9k，确实是一个非常受欢迎的纯css框架项目地址vue-bluhttps://github.com/chen...
vue.js--Tab选项卡
那支歌的博客
10-24 1万+
代码如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{padding: 0;margin: 0} #app{ width: 500px;he
Vue tab选项卡
小羽向前跑
02-07 1990
最终效果： 功能： 点击标题显示对应内容   tab.vue所有代码： &lt;template&gt; &lt;div&gt; &lt;div id="tab"&gt; &lt;div class="tab-tit"&gt; &lt;!--点击设置curId的值 如果curId等于0，第一个a添加cur类名，如果curId
Vue实现选项卡切换效果详解
"这篇文档详细介绍了如何在Vue.js框架中实现选项卡切换的效果，强调了Vue的基础知识和实际项目中的应用。" Vue.js是一个流行的JavaScript前端框架，它以声明式编程和组件化著称，使得构建用户界面变得更加简单。在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值