vue数组的响应式

最新推荐文章于 2024-06-26 22:05:04 发布

nanzai11111

最新推荐文章于 2024-06-26 22:05:04 发布

阅读量154

点赞数

分类专栏： vue学习心得文章标签： vue.js

本文链接：https://blog.csdn.net/nanzai11111/article/details/109096777

版权

vue学习心得专栏收录该内容

17 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  并不是所有的方法都可以做到响应式的
  <ul>
    <li v-for="item in letter">{{item}}</li>
  </ul>
  <button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
        el: '#app',
        data: {
          letter:['a','b','c','d']
        },
    methods:{
          btnClick(){
            /* 注意注意：这种直接使用下表调用的方式不是响应式的，虽然也会把值改掉，但是不会显示在页面上
            this.letter[0]='ssds';*/

            // 下面这些方法都是响应式的
            // 1、push方法
            // this.letter.push('aaaa')
            // this.letter.push('aaaa','sssa')

            // 2、pop方法:把最后一个元素删除
            // this.letter.pop();

            // 3、shift()方法：删除数组中的第一个元素
            // this.letter.shift();

            // 4、unshift()在数组第一个前面添加元素
            // this.letter.unshift('aaaa','bbbb')
            // 5、splice(start)方法
            //作用：删除元素，插入元素，替换元素
            /*第一个参数是选择开始的位置
            删除元素的话：第二个参数传入要删除几个元素（如果没有传的话，就是删除后面所有的元素）
            splice(1,3)
            替换元素：第二个参数表示要替换几个元素，后面的参数就是用于替换之前的元素
            splice(1,2,'ww','eee')
            还有一种修改的方法
            Vue.set(要修改的对象，索引值（修改什么位置上的值），修改后的值)
            插入元素：第二个参数传入0，后面的参数就是表示在这个位置后面要插入的元素
            splice(1,0,'sss','dsds')*/
            // sort()方法：排序

           /* reverse()方法表示反转
            this.letter.reverse();*/
          }

    }
      })
</script>
</body>
</html>