vue實現(xiàn)簡易選項卡功能
更新時間：2022年06月24日 16:11:05 作者：顧舟
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡易選項卡功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)簡易選項卡功能的具體代碼，供大家參考，具體內(nèi)容如下
1. 效果：
1. 實現(xiàn)發(fā)布評論功能
2. 實現(xiàn)評論列表的展示
3. 使用標簽頁切換的方式來實現(xiàn)
4. 高亮顯示當前標簽頁欄對應的導航
2.HTML
<div id="app">
? ? ? ? <p>
? ? ? ? ? ? <button @click="tab(0)" :class="current===0?'active':''">評論管理</button>
? ? ? ? ? ? <button @click="tab(1)" :class="current===1?'active':''">發(fā)布評論</button>
? ? ? ? </p>
? ? ? ? <div class="box2" v-show="current===0">
? ? ? ? ? ? <div v-for="item in list">
? ? ? ? ? ? ? ? <p>評論人：{{item.username}}</p>
? ? ? ? ? ? ? ? <p>評論時間：{{item.time}}</p>
? ? ? ? ? ? ? ? <p>評論內(nèi)容：{{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="評論內(nèi)容"><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.實現(xiàn)發(fā)布評論選項卡功能
// 創(chuàng)建Vue的實例化對象
? ? new Vue({
? ? ? ? data: {
? ? ? ? ? ? // 控制選項卡切換
? ? ? ? ? ? current: 1,
? ? ? ? ? ? // 與輸入框進行數(shù)據(jù)綁定
? ? ? ? ? ? username: '',
? ? ? ? ? ? content: '',
? ? ? ? ? ? // 創(chuàng)建評論管理列表數(shù)據(jù)
? ? ? ? ? ? list: []
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? ? // 點擊提交按鈕
? ? ? ? ? ? submit() {
? ? ? ? ? ? ? ? // 創(chuàng)建當前時間
? ? ? ? ? ? ? ? let date = new Date();
? ? ? ? ? ? ? ? let year = date.getFullYear();
? ? ? ? ? ? ? ? let mon = date.getMonth() + 1;
? ? ? ? ? ? ? ? let day = date.getDate();
? ? ? ? ? ? ? ? let time = year + "-" + mon + '-' + day;
? ? ? ? ? ? ? ? // 創(chuàng)建評論對象
? ? ? ? ? ? ? ? const infor = {
? ? ? ? ? ? ? ? ? ? username: this.username,
? ? ? ? ? ? ? ? ? ? content: this.content,
? ? ? ? ? ? ? ? ? ? time
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? // 將評論對象追加到評論管理的列表末尾
? ? ? ? ? ? ? ? this.list.push(infor);
? ? ? ? ? ? ? ? //重置input輸入框的內(nèi)容
? ? ? ? ? ? ? ? this.username = '';
? ? ? ? ? ? ? ? this.content = "";
? ? ? ? ? ? },
? ? ? ? ? ? // 點擊評論管理按鈕、發(fā)布評論按鈕(實現(xiàn)選項卡)
? ? ? ? ? ? tab(index) {
? ? ? ? ? ? ? ? this.current = index;
? ? ? ? ? ? }
? ? ? ? }
? ? }).$mount("#app");以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Vue讀取本地靜態(tài).md并側(cè)邊欄導航跳轉(zhuǎn)、展示.md文件的操作方法
這篇文章主要介紹了Vue讀取本地靜態(tài).md并側(cè)邊欄導航跳轉(zhuǎn)、展示.md文件,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue 微信掃碼登錄(自定義樣式)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
如何使用Vue3的onMounted鉤子函數(shù)及vue3中onMounted的用法詳解
本文詳細介紹了Vue3中的`onMounted`鉤子函數(shù)的前世今生,包括其在Vue2中的前身`mounted`鉤子,以及Vue3中使用Composition?API的`onMounted`鉤子的用法,文章涵蓋了`onMounted`的多種用法,感興趣的朋友跟隨小編一起看看吧2024-11-11
這篇文章主要分享vuex中mapState思想及應用，在需求開發(fā)過程中，有的接口返回的結果中有很多字段需要展示到頁面上。通?？梢詫⑦@些字段在.vue文件中封裝為計算屬性，或者重新將對應字段賦值到 data 中的字段來達到便于使用的目的，具體內(nèi)容，我們一起來看下面文章內(nèi)容吧2021-10-10
老虎機在很多地方都可以見到，可以設置中獎位置，以及中獎回調(diào)，本文主要介紹了VUE 實現(xiàn)一個簡易老虎機的項目實踐，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
文章介紹了如何使用Vue CLI 2搭建Vue項目,并添加Electron插件vue-cli-plugin-electron-builder來創(chuàng)建一個Vue+Electron項目,文章還提供了啟動和打包項目的方法,并提示了下載國內(nèi)網(wǎng)較慢的文件時可以先注釋掉代碼進行調(diào)試,感興趣的朋友一起看看吧
2025-01-01 
這篇文章主要為大家介紹了Vue獲取表單數(shù)據(jù)的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-12-12 
這篇文章主要介紹了關于vue3中setup函數(shù)的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04 
這篇文章給大家介紹基于vue實現(xiàn)循環(huán)滾動列表功能，給大家介紹了該組件的用法，通過實例代碼給大家介紹的非常詳細，需要的朋友參考下吧
2021-09-09