1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

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

1

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

// 创建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");