<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="昵稱(chēng)"><br>
? ? ? ? ? ? <input v-model="content" type="text" placeholder="評(píng)論內(nèi)容"><br>
? ? ? ? ? ? <button @click="submit">立即提交</button>
? ? ? ? </div>
</div>

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

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

// 創(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");