Vue 变异方法splice删除评论功能

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title id="title">{{title}}</title>

</head>

<body>

<div id="ask"><!--vue不能控制body和html的标签-->

    <ul>

        <li v-for="(v,k) in list">

            {{v.content}}<button v-on:click="remove(k)">删除</button>

        </li>

    </ul>

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

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

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

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

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

</div>

<script>

    var vue = function (options){new Vue(options)};

    vue({

        el:'#title',

        data:{

            title:'Vue 变异方法splice删除评论功能'

        }

    });

    var app = vue({

        el:'#ask',

        data:{

            content:'',

            list:[

                {'content':'ask.mykeji.net'},

                {'content':'简单记录'}

            ]

        },

        methods:{

            remove(k){

                this.list.splice(k,1)

            },

            push(type){

                var content_push = {'content':this.content};

                switch (type) {

                    case 'pre':

                        this.list.unshift(content_push);

                        break;

                    case "end":

                        this.list.push(content_push);

                        break;

                }

                this.content='';

            },

            del(type){

                switch (type) {

                    case 'first':

                        this.list.shift();

                        break;

                    case "last":

                        this.list.pop();

                        break;

                }

            }

        }

    });

</script>

</body>

</html>
巴特西

Vue 变异方法splice删除评论功能

最新文章

热门文章
