Vue.js之数组和对象的响应式更改

cloudOnSkyline

已于 2022-08-02 11:30:25 修改

阅读量1.4k

点赞数

分类专栏： JavaScript 文章标签： vue.js javascript

于 2022-07-16 13:57:54 首次发布

本文链接：https://blog.csdn.net/weixin_44827643/article/details/125818976

版权

JavaScript 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

1.数组方法

2.修改数组及对象（响应式）

本文主要介绍Vue.js中如何实现数组和对象的响应式更改。简单来说，在Vue.js中，单纯利用索引和属性进行数组元素以及对象内容的更改，所操作的数据并不具备响应式的特点。下面通过案例进行简单介绍。

1.数组方法

Vue.js提供的数组方法（诸如pop、push等）不同于原生js所提供的数组方法，在操作数组元素时具备响应式的特点。以下案例对其中的一些方法进行了具体使用，效果如图。（注意：filter、concat以及slice会产生新的数组）

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div> <input type="text" v-model="fname">
            <button @click="add">添加</button> <button @click="del">删除</button>
            <button @click="change">替换</button> </div>
        <ul>
            <li v-for="(item,index) in list" v-text="item" :key="index"></li>
        </ul>
    </div>
    <script src="./vue.min.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                fname: '',
                list: ['apple', 'orange', 'pear']
            },
            methods: {
                add: function() {
                    this.list.push(this.fname)
                },
                del: function() {
                    this.list.pop();
                },
                change: function() {
                    // slice,filter以及concat会生成新数组
                    this.list = this.list.slice(0, 2);
                }
            },
            filters: {},
            directives: {},
            computed: {}
        })
    </script>
</body>

</html>

2.修改数组及对象（响应式）

在上面代码的基础上进行进一步的演示，在data中添加info对象。首先，利用索引进行数组元素的更改，但页面内容没有发生改变。利用属性进行对象属性的添加，页面虽然显示，但不具备响应式的特点。Vue.js提供两种方法解决这一问题。

（1）Vue.set(实例.对象或数组，索引或属性，值)

（2）实例.$set(实例.对象或数组，索引或属性，值)

如下所示，

 // vm.list[0] = 'watermelon';//不具备响应式
        vm.$set(vm.list, 0, 'watermelon');
        Vue.set(vm.list, vm.list.length - 1, 'last');
        // vm.info.height = 178;//可以显示，但不具备响应式
        vm.$set(vm.info, 'height', 178);

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div> <input type="text" v-model="fname">
            <button @click="add">添加</button> <button @click="del">删除</button>
            <button @click="change">替换</button> </div>
        <ul>
            <li v-for="(item,index) in list" v-text="item" :key="index"></li>
        </ul>
        <div>
            <div v-text="info.realName"></div>
            <div v-text="info.age"></div>
            <div v-text="info.height"></div>
        </div>
    </div>
    <script src="./vue.min.js"></script>
    <script>
        let vm = new Vue({
                el: '#app',
                data: {
                    fname: '',
                    list: ['apple', 'orange', 'pear'],
                    info: {
                        realName: 'zs',
                        age: 40
                    }
                },
                methods: {
                    add: function() {
                        this.list.push(this.fname)
                    },
                    del: function() {
                        this.list.pop();
                    },
                    change: function() {
                        // slice,filter以及concat会生成新数组
                        this.list = this.list.slice(0, 2);
                    }
                },
                filters: {},
                directives: {},
                computed: {}
            })
            // vm.list[0] = 'watermelon';//不具备响应式
        vm.$set(vm.list, 0, 'watermelon');
        Vue.set(vm.list, vm.list.length - 1, 'last');
        // vm.info.height = 178;//可以显示，但不具备响应式
        vm.$set(vm.info, 'height', 178);
    </script>
</body>

</html>

cloudOnSkyline

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js之数组和对象的响应式更改

本文主要介绍Vue.js中如何实现数组和对象的响应式更改。简单来说，在Vue.js中，单纯利用索引和属性进行数组元素以及对象内容的更改，所操作的数据并不具备响应式的特点。下面通过案例进行简单介绍。......
复制链接

扫一扫