vue如何实现简易选项卡功能

这篇文章主要讲解了“Vue如何实现简易选项卡功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue如何实现简易选项卡功能”吧！

1. 效果：

实现发布评论功能

实现评论列表的展示

使用标签页切换的方式来实现

高亮显示当前标签页栏对应的导航

2.html

<div id="app">        <p>            <button @click="tab(0)" :class="current===0?'active':''">评论管理</button>            <button @click="tab(1)" :class="current===1?'active':''">发布评论</button>        </p>        <div class="box2" v-show="current===0">            <div v-for="item in list">                <p>评论人：{{item.username}}</p>                <p>评论时间：{{item.time}}</p>                <p>评论内容：{{item.content}}</p>            </div>        </div>        <div class="box1" v-show="current===1">            <input v-model="username" type="text" placeholder="昵称"><br>            <input v-model="content" type="text" placeholder="评论内容"><br>            <button @click="submit">立即提交</button>        </div></div>

CSS

<style>        #app div {            width: 600px;            font-size: 14px;            box-sizing: border-box;        }         .box1 {            height: 200px;            padding: 20px 0 0 10px;            background: #eee;        }         .box2>div {            height: 200px;            padding: 20px 0 0 10px;            background: #eee;            margin-bottom: 10px;        }         p button {            width: 100px;            height: 35px;            border: none;            background: #e1e1e1;        }         p button.active {            background: blue;            color: #fff;        }         .box1 input {            width: 350px;            height: 35px;            outline: none;            border: 1px solid #ccc;            margin-bottom: 10px;            border-radius: 5px;            box-sizing: border-box;        }         .box1 button {            width: 80px;            height: 35px;            border: none;            border-radius: 5px;            background: #e1e1e1;        }</style>

引入vue.js文件

<script src="vue.js"></script>

实现发布评论选项卡功能

// 创建Vue的实例化对象    new Vue({        data: {            // 控制选项卡切换            current: 1,            // 与输入框进行数据绑定            username: '',            content: '',            // 创建评论管理列表数据            list: []        },        methods: {            // 点击提交按钮            submit() {                // 创建当前时间                let date = new Date();                let year = date.getFullYear();                let mon = date.getMonth() + 1;                let day = date.getDate();                let time = year + "-" + mon + '-' + day;                // 创建评论对象                const infor = {                    username: this.username,                    content: this.content,                    time                }                // 将评论对象追加到评论管理的列表末尾                this.list.push(infor);                //重置input输入框的内容                this.username = '';                this.content = "";            },            // 点击评论管理按钮、发布评论按钮(实现选项卡)            tab(index) {                this.current = index;            }        }    }).$mount("#app");

感谢各位的阅读，以上就是“vue如何实现简易选项卡功能”的内容了，经过本文的学习后，相信大家对vue如何实现简易选项卡功能这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！