提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

vue数组响应式的方法详解

Vue响应方法数组 详解
2023-09-27 14:26:27 时间

vue数组的方法

push方法，可以做到响应式

  • 可以传入一个值

  • 可以传入多个值

    <script>
    this.letters.push('aaa');
    this.letters.push('aaa','bbb','ccc');
</script>

pop():删除数组中的最后一个元素，可以做到响应式

<script>
   this.letters.pop();
</script>

shift():删除数组中的第一个元素，可以做到响应式

<script>
    this.letters.shift();
</script>

unshift():在数组最前面添加元素，可以做到响应式

  • 可以传入一个值
  • 可以传入多个值
    <script>
   this.letters.unshift('aaaa')
   this.letters.unshift('aaaa','bbbb','cccc')
</script>

splice作用：删除元素/插入元素/替换元素，可以做到响应式

  • 删除元素splice(start)和splice(start，count)

    <script>
	this.letters.splice(1)//删除1之后的元素
	this.letters.splice(1，2)//删除1之后的两个元素
</script>

  • 替换元素splice(1,3,'m','n','l') 位置1之后的三个元素替换为mnl

    <script>
	this.letters.splice(1,3,'m','n','l')
</script>

  • 插入元素splice(1,0,'m','n','l')位置1插入三个元素

    <script>
	this.letters.splice(1,0,'m','n','l')
</script>

sort()可以做到响应式，正序

<script>
   this.letters.sort();
</script>

reverse()可以做到响应式，倒序

<script>
   this.letters.reverse();
</script>

通过索引值修改数组中的元素,不是响应式的

<script>
    this.letters[0] = 'bbbb';
</script>

如何做到修改数组中的元素做到响应式呢？

  • 使用splice实现
    <script>
   this.letters.splice(0,1,'bbbbbb')
</script>
  • 使用vue自带的方法实现
    <script>
   Vue.set(this.letters,0,'bbbbb')
</script>

综合代码（可运行）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(item,index) in letters" :key="item+index">{{item}}</li>
    </ul>
    <button @click="btnClick"> 按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            letters:['A','A','C','D','E']
        },
        methods: {
            btnClick() {
                //1.push方法，可以做到相应式
                // this.letters.push('aaa');
                // this.letters.push('aaa','bbb','ccc');

                //2.pop():删除数组中的最后一个元素，可以做到相应式
                // this.letters.pop();

                //3.shift():删除数组中的第一个元素，可以做到相应式
                //this.letters.shift();

                //4.unshift():在数组最前面添加元素，可以做到相应式
                // this.letters.unshift('aaaa')
                //this.letters.unshift('aaaa','bbbb','cccc')

                //5.splice作用：删除元素/插入元素/替换元素，可以做到相应式
                //删除元素：第二个参数传入你要删除几个元素
                //splice(start):表示删除start以后的元素全部删掉
                //this.letters.splice(1)
                //splice(start，count):表示从start删除count个元素
                //this.letters.splice(1，2)//删除1之后的两个元素
                //替换元素：splice(1,3,'m','n','l')
                //this.letters.splice(1,3,'m','n','l')
                //插入元素：splice(1,0,'m','n','l')
                //this.letters.splice(1,0,'m','n','l')

                //6.sort()，可以做到相应式
                //this.letters.sort();

                //7.reverse()，可以做到相应式
                //this.letters.reverse();

                //8.通过索引值修改数组中的元素,不是响应式的
                //this.letters[0] = 'bbbb';
                //可以通过以下方式代替
                //this.letters.splice(0,1,'bbbbbb')
                //set(要修改的值，索引值，修改后的值)
                Vue.set(this.letters,0,'bbbbb')
            }
        }
    })
</script>
</body>
</html>

相关文章