022——VUE中remove()方法的使用：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue中的变异方法：splice()方法</title>

    <script type="text/javascript" src="vue.js"></script>

</head>

<body>

<div id="demo">

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

        {{v.content}}

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

    </li>

    <textarea rows="10" cols="20" v-model="current"></textarea><br/>

    <button v-on:click="push('first')">在数据前面增加</button>

    <button v-on:click="push('last')">在数据后面增加</button>

    <br>

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

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

</div>

<script type="text/javascript">

new Vue({

    el:"#demo",

    data:{

        current:"",

        comments:[

            {content:'PHP'},

            {content:'JAVA'}

        ]

    },

    methods:{

        //增加数据的方法：

        push(type){

            var content={content:this.current};

            switch (type){

                case 'first':

                    this.comments.unshift(content);

                    break;

                case 'last':

                    this.comments.push(content);

                    break;

            }

            this.current="";

        },

        //删除数据的方法：

        del(type){

            switch (type){

                case 'first':

                    this.comments.shift();

                    break;

                case 'last':

                    this.comments.pop();

                    break;

            }

        },

        //点击删除，删除对应的数据信息：

        remove(k){

            this.comments.splice(k,1);

        }

    }

});

</script>

</body>

</html>
巴特西

022——VUE中remove()方法的使用：

最新文章

热门文章
