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

这篇文章主要讲解了“vue如何实现简易选项卡功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue如何实现简易选项卡功能”吧!1.效果:1.实现发布评论功能2.实

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

1. 效果:

1. 实现发布评论功能

2. 实现评论列表的展示

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

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

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>

3.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>

4.引入vue.js文件

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

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");

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

本站部分文章来自网络或用户投稿,如无特殊说明或标注,均为本站原创发布。涉及资源下载的,本站旨在共享仅供大家学习与参考,如您想商用请获取官网版权,如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
后端

怎么利用python创作字符画

2022-7-16 9:04:56

后端

JavaScript数组操作方法实例代码分析

2022-7-16 9:04:59

搜索