021——VUE中变异方法 push/unshift pop/shift

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>变异方法：push/unshift pop/shift</title>

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

</head>

<body>

<div id="hdcms">

    <li v-for="v in comments">

        {{v.content}}

    </li>

    <textarea v-model="current_content" cols="30" rows="10"></textarea><br>

    <button v-on:click="push('end')">发表到最后</button>

    <button v-on:click="push('prev')">发表到前面</button>

    <br>

    <button v-on:click="del('pop')">删除最后一条</button>

    <button v-on:click="del('shift')">删除第一条</button>

</div>

<script>

    var app = new Vue({

        el: '#hdcms',

        data: {

            //当前用户输入内容：

            current_content: "",

            comments: [

                {content: "后盾人"},

                {content: "老师"}

            ]

        },

        methods: {

            push(type) {

                var content = {content: this.current_content};

                switch (type) {

                    case 'end':

                        this.comments.push(content);

                        break;

                    case 'prev':

                        this.comments.unshift(content);

                        break;

                }

                this.current_content = "";

            },

            del(type) {

                switch (type) {

                    case 'pop':

                        this.comments.pop();

                        break;

                    case 'shift':

                        this.comments.shift();

                        break;

                }

            }

        }

    });

</script>

</body>

</html>
巴特西

021——VUE中变异方法 push/unshift pop/shift

最新文章

热门文章
