vue實(shí)現(xiàn)簡(jiǎn)易選項(xiàng)卡功能

更新時(shí)間：2022年06月24日 16:11:05 作者：顧舟

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)易選項(xiàng)卡功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)簡(jiǎn)易選項(xiàng)卡功能的具體代碼，供大家參考，具體內(nèi)容如下

1. 效果：

1. 實(shí)現(xiàn)發(fā)布評(píng)論功能

2. 實(shí)現(xiàn)評(píng)論列表的展示

3. 使用標(biāo)簽頁(yè)切換的方式來(lái)實(shí)現(xiàn)

4. 高亮顯示當(dāng)前標(biāo)簽頁(yè)欄對(duì)應(yīng)的導(dǎo)航

2.HTML

<div id="app">
? ? ? ? <p>
? ? ? ? ? ? <button @click="tab(0)" :class="current===0?'active':''">評(píng)論管理</button>
? ? ? ? ? ? <button @click="tab(1)" :class="current===1?'active':''">發(fā)布評(píng)論</button>
? ? ? ? </p>
? ? ? ? <div class="box2" v-show="current===0">
? ? ? ? ? ? <div v-for="item in list">
? ? ? ? ? ? ? ? <p>評(píng)論人：{{item.username}}</p>
? ? ? ? ? ? ? ? <p>評(píng)論時(shí)間：{{item.time}}</p>
? ? ? ? ? ? ? ? <p>評(píng)論內(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="評(píng)論內(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.實(shí)現(xiàn)發(fā)布評(píng)論選項(xiàng)卡功能

// 創(chuàng)建Vue的實(shí)例化對(duì)象
? ? new Vue({
? ? ? ? data: {
? ? ? ? ? ? // 控制選項(xiàng)卡切換
? ? ? ? ? ? current: 1,
? ? ? ? ? ? // 與輸入框進(jìn)行數(shù)據(jù)綁定
? ? ? ? ? ? username: '',
? ? ? ? ? ? content: '',
? ? ? ? ? ? // 創(chuàng)建評(píng)論管理列表數(shù)據(jù)
? ? ? ? ? ? list: []
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? ? // 點(diǎn)擊提交按鈕
? ? ? ? ? ? submit() {
? ? ? ? ? ? ? ? // 創(chuàng)建當(dāng)前時(shí)間
? ? ? ? ? ? ? ? let date = new Date();
? ? ? ? ? ? ? ? let year = date.getFullYear();
? ? ? ? ? ? ? ? let mon = date.getMonth() + 1;
? ? ? ? ? ? ? ? let day = date.getDate();
? ? ? ? ? ? ? ? let time = year + "-" + mon + '-' + day;
? ? ? ? ? ? ? ? // 創(chuàng)建評(píng)論對(duì)象
? ? ? ? ? ? ? ? const infor = {
? ? ? ? ? ? ? ? ? ? username: this.username,
? ? ? ? ? ? ? ? ? ? content: this.content,
? ? ? ? ? ? ? ? ? ? time
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? // 將評(píng)論對(duì)象追加到評(píng)論管理的列表末尾
? ? ? ? ? ? ? ? this.list.push(infor);
? ? ? ? ? ? ? ? //重置input輸入框的內(nèi)容
? ? ? ? ? ? ? ? this.username = '';
? ? ? ? ? ? ? ? this.content = "";
? ? ? ? ? ? },
? ? ? ? ? ? // 點(diǎn)擊評(píng)論管理按鈕、發(fā)布評(píng)論按鈕(實(shí)現(xiàn)選項(xiàng)卡)
? ? ? ? ? ? tab(index) {
? ? ? ? ? ? ? ? this.current = index;
? ? ? ? ? ? }
? ? ? ? }
? ? }).$mount("#app");

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: