Vue写一个标签切换特效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue标签切换</title>
    <style type="text/css">
        .tab{
            width: 360px;
            height: 260px;
            border:1px solid #000;
            margin:100px auto;
        }
        .tab .hd{overflow: hidden;}
        .tab .hd span{
            float: left;
            width: 120px;
            height: 40px;
            line-height: 40px;
            background-color:#ccc;
            text-align: center;
        }
        .tab .hd span.cur{
            background-color: orange;
        }
        .tab .bd div{
            padding:20px;
        }
    </style>
</head>
<body>
<div class="tab">
    <div class="hd">
        <span v-bind:class="{cur:lanmu=='xinwen'}" v-on:click="change('xinwen')">新闻</span>
        <span v-bind:class="{cur:lanmu=='tupian'}" v-on:click="change('tupian')">图片</span>
        <span v-bind:class="{cur:lanmu=='junshi'}" v-on:click="change('junshi')">军事</span>
    </div>
    <div class="bd">
        <div class="xinwen" v-if="lanmu=='xinwen'">我是新闻</div>
        <div class="tupian" v-if="lanmu=='tupian'">我是图片</div>
        <div class="junshi" v-if="lanmu=='junshi'">我是军事</div>
    </div>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
new Vue({
    el:".tab",
    data:{
        lanmu:"xinwen"
    },
    methods:{
        change:function(str){
            this.lanmu = str;
        }
    }
});
</script>
</body>
</html>

### 回答1: 这是一个使用 Vue.js 实现 tab 切换的简单代码示例: ``` <template> <div> <ul class="tab-header"> <li v-for="(tab, index) in tabs" :key="index" :class="{ active: currentTab === index }" @click="currentTab = index"> {{ tab.title }} </li> </ul> <div class="tab-content"> <slot :tab="tabs[currentTab]"></slot> </div> </div> </template> <script> export default { data() { return { currentTab: 0, tabs: [ { title: 'Tab 1', content: 'Tab 1 content' }, { title: 'Tab 2', content: 'Tab 2 content' }, { title: 'Tab 3', content: 'Tab 3 content' }, ], }; }, }; </script> <style> .tab-header { display: flex; list-style: none; margin: 0; padding: 0; } .tab-header li { padding: 10px; cursor: pointer; } .tab-header li.active { background-color: #ddd; } </style> ``` 在父组件中使用该组件: ``` <template> <tab-component> <template v-slot:default="{ tab }"> {{ tab.content }} </template> </tab-component> </template> <script> import TabComponent from './TabComponent.vue'; export default { components: { TabComponent, }, }; </script> ``` 该代码实现了一个通过单击标签切换内容的简单 tab 组件。 ### 回答2: Vue一个轻量级的JavaScript框架,它可以通过构建组件来构建用户界面。下面是使用Vue构建一个简单的Tab切换示例: 第一步是在HTML文件中引入Vue和相关的样式表和脚本: ```html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <ul class="nav nav-tabs"> <li v-for="(tab, index) in tabs" :key="index" :class="{ 'active': activeTab === index }"> <a @click="activeTab = index" :href="'#tab-' + index">{{ tab }}</a> </li> </ul> <div class="tab-content"> <div v-for="(content, index) in contents" :key="index" :id="'tab-' + index" class="tab-pane" :class="{ 'active': activeTab === index }"> {{ content }} </div> </div> </div> <script> new Vue({ el: '#app', data: { tabs: ['Tab 1', 'Tab 2', 'Tab 3'], contents: ['Content 1', 'Content 2', 'Content 3'], activeTab: 0 } }); </script> </body> </html> ``` 上述代码创建了一个包含三个标签页的Tab切换组件。每个标签页都通过`v-for`循环来生成,并绑定了`activeTab`属性以控制当前显示的标签页。当用户点击标签时,`@click`事件会触发`activeTab`的变化,从而切换到对应的标签页。 该例子使用了Bootstrap样式来美化Tab切换效果,你可以根据需要自定义样式。 ### 回答3: Vue一个用于构建用户界面的渐进式JavaScript框架。它易于学习和使用,并且具有很高的灵活性。 要使用 Vue 一个 tab 切换,首先需要在 HTML 页面中引入 Vue 的库和相关的样式文件。然后,在一个容器元素中定义一个 Vue 实例,并在实例的 data 属性中设置需要显示的 tab 内容和当前选中的 tab。 HTML部分代码如下所示: ``` <div id="app"> <ul class="tab-menu"> <li v-for="(tab, index) in tabs" :key="index" :class="{ active: currentTab === index }" @click="changeTab(index)"> {{ tab.title }} </li> </ul> <div class="tab-content"> {{ tabs[currentTab].content }} </div> </div> ``` 然后,在 JavaScript 部分创建 Vue 实例,并在实例的 methods 属性中定义一个函数来响应 tab 切换的事件。 JavaScript部分代码如下所示: ``` new Vue({ el: '#app', data: { currentTab: 0, tabs: [ { title: 'Tab 1', content: 'This is the content of Tab 1.' }, { title: 'Tab 2', content: 'This is the content of Tab 2.' }, { title: 'Tab 3', content: 'This is the content of Tab 3.' } ] }, methods: { changeTab(index) { this.currentTab = index; } } }); ``` 以上代码中,通过 v-for 指令循环遍历 tabs 数组,并根据当前选中的 tab 为对应的 li 元素添加 active 类来突出显示当前选中的 tab。当用户点击 li 元素时,会触发 changeTab 方法来改变当前选中的 tab。 通过以上的代码,我们实现了一个简单的 tab 切换功能。用户点击不同的 tab 标签时,下方的内容区域会显示对应的内容。你可以根据实际需求进行样式调整和功能扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值