vue选项卡

最新推荐文章于 2023-04-25 17:43:49 发布

Mr-吱吱

最新推荐文章于 2023-04-25 17:43:49 发布

阅读量554

点赞数

分类专栏： vue-js 前端框架

本文链接：https://blog.csdn.net/qq_35327397/article/details/78974874

版权

vue-js 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

前端框架

2 篇文章 0 订阅

订阅专栏

<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</li>
            <li v-show="block">03</li>
        </ul>
        <button v-on:click="nan1('a')">选项卡1</button>
        <button v-on:click="nan1('b')">选项卡2</button>
        <button v-on:click="nan1('c')">选项卡3</button>
</div>

<script type="text/javascript">
            new Vue({
                el: "#app",
                data: {
                    block: true,
                    item: "c",
                },
                methods: {
                    nan1: function(char) {
                        this.item = char;
                    },
                },
            })
    </script>