Vue简单组件tab选项卡

最新推荐文章于 2024-06-10 14:00:33 发布

hemeng0115

最新推荐文章于 2024-06-10 14:00:33 发布

阅读量1.9k

点赞数 1

分类专栏： Vue 文章标签： Vue组件

本文链接：https://blog.csdn.net/hemeng0115/article/details/84960156

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡组件</title>
    <script src="vue.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #nav ul{
            list-style: none;
        }
        #nav ul li{
            display: inline-block;
            width:100px;
            height: 50px;
            line-height: 50px;
            font-size: 20px;
            text-align: center;
            border:2px solid #ffff00;
            box-sizing: border-box;
        }
        .pink{
            background-color: pink;
        }
        .blue{
            background-color: #0086b3;
        }
        #div{
            width:500px;
            height:300px;
            font-size: 30px;
            text-align: center;
            line-height: 300px;
            background-color: #718c00;
        }
    </style>
</head>
<body>
<div id="app">
    {{name}}
    <test></test>
</div>
<template id="tp1">
    <div id="nav">
        <ul>
            <li v-for="item in array" @click="choose(item)" :class='content===item?"pink":"blue"'>{{item}}</li>
        </ul>
        <div id="div">{{content}}</div>
    </div>
</template>
<script>
    //创建一个组件
    var component=Vue.extend({
       template:"#tp1",
        data:function () {
            return{
              content:"北京",
              array:["北京","上海","杭州","广州","深圳"]
           }
        },
        methods:{
           choose:function (item) {
            this.content=item;
           }
        }
    });
    //注册一个组件
    Vue.component("test",component);
    new Vue({
        el:"#app",
        data:{
            name:"选项卡组件案例"
        }
    });
</script>
</body>
</html>

结果截图(点相应的标题，下面会出现不同的内容)

hemeng0115

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
Vue简单组件tab选项卡

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;选项卡组件&lt;/title&gt; &lt;script src="vue.js"&gt;&lt
复制链接

扫一扫

专栏目录