v-for 数组响应式

最新推荐文章于 2024-08-28 18:19:04 发布

陈平安＂

最新推荐文章于 2024-08-28 18:19:04 发布

阅读量256

点赞数

文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/weixin_51627264/article/details/120481351

版权

v-for 数组响应式方法

1.push方法从最后开始添加可以添加多个

2.pop方法删除最后一位

3.shitf方法删除第一位

4.unshift方法从头添加可以添加多个

5.splice:删除元素/插入元素/替换元素

**6. sort 排序*

7.reverse 反转

代码实例

<!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">
      <ul>
          <li v-for="item in letters">{{item}}</li>
          <button @click="btnClick">最后添加</button>
          <button @click="btn2Click">删除最后一位</button>
          <button @click="btn3Click">删除第一位</button>
          <button @click="btn4Click">从头添加</button>
          <button @click="btn5Click">splice</button>
          <button @click="btn6Click">排序</button>
          <button @click="btn7Click">反转</button>
      </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                letters :['A','B','C','D','E']
            },
            methods: {
                //1.push方法 从最后开始添加  可以添加多个
                btnClick(){
                    this.letters.push('F');//  this.letters.push('F','G','I');
                },
                //2.pop方法 删除最后一位
                btn2Click(){
                    this.letters.pop();
                },
                //3.shitf方法 删除第一位
                btn3Click(){
                    this.letters.shift();
                },
                //4.unshift方法 从头添加 可以添加多个
                btn4Click(){
                    this.letters.unshift('A');
                },
                //5.splice:删除元素/插入元素/替换元素
                /* 删除元素:第二个参数传入你要删除几个元素 */
                 /* 替换元素 :第二个参数标识我们要替换几个元素，后面是用来替换的元素 */
                 /* 插入元素：第二个参数传入0 后面跟上要插入的元素 */
                btn5Click(){
                   /*  (1)
                   const start = 2;
                    this.letters.splice(start,this.letters.length-start); */
                   /*  this.letters.splice(1,2) */

                   /* 替换元素 */
                   /* this.letters.splice(1,3,'1','2','3') */
                   /* 插入元素 */
                   this.letters.splice(1,0,'a','b','c')
                },
                //6. sort 排序
                btn6Click(){
                    this.letters.sort();
                },
                //7.reverse  反转
                btn7Click(){
                    this.letters.reverse();
                },
            },
        })         
    
    </script>
</body>
</html>

这里要注意通过索引值修改数组中的元素不是响应式的

通过这个方式，VUE是不会监听的不会给你渲染DOM

示例