vue实现简易选项卡功能

本文实例为大家分享了vue实现简易选项卡功能的具体代码，供大家参考，具体内容如下

1. 效果：

1. 实现发布评论功能

2. 实现评论列表的展示

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

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

2.HTML

        

            评论管理
            发布评论
        
        

            

                
评论人：{{item.username}}
                
评论时间：{{item.time}}
                
评论内容：{{item.content}}
            
        
        

            

            

            立即提交
        

3.CSS

4.引入vue.js文件

5.实现发布评论选项卡功能

// 创建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");

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。