vue如何實現簡易選項卡功能

這篇文章主要講解了“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如何實現簡易選項卡功能這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！