vue修改数组元素方法

时间：2022-05-30 05:41:32

示例代码

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>vue修改数组元素方法</title>

    </head>

    <body>

        <div id="root">

            <div v-for="item in arr">

                {{ item }}

            </div>

            <button @click="changeArr1">修改数组元素方法--方法一</button>

            <button @click="changeArr2">修改数组元素方法--方法二</button>

            <button @click="changeArr3">修改数组元素方法--方法三</button>

        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <script type="text/javascript">

            var vm = new Vue({

                el: '#root',

                data: {

                    arr: [1, 2, 3]

                },

                methods: {

                    changeArr1: function() {

                        Vue.set(vm.arr, 0, '方法一');

                    },

                    changeArr2: function() {

                        vm.$set(vm.arr, 0, '方法二');

                    },

                    changeArr3: function() {

                        this.arr.splice(0, 1, '方法三');

                        //vm.arr.splice(0,1,'方法三');

                    }

                }

            });

        </script>

    </body>

</html>

相关文章