数组的响应式方法

Posted 2021-06-21 高不高

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了数组的响应式方法相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<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>数组的响应式方法 </title>
</head>
<body>
  <div id="app">
    <!-- 数组的响应式方法 -->
    <ul>
      <li v-for="item in letters">{{item}}</li>
    </ul>
    <button @click="btn1">push</button><br>
    <button @click="btn2">通过索引值修改数组</button>


  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        letters:[\'a\',\'b\',\'c\',\'d\',\'e\']
      },
      methods: {
        btn1(){
          //1.push
          this.letters.push(\'f\')
          //2.pop()删除最后一个元素
          //this.letters.pop()
          //3.shift()删除第一个
          //this.letters.shift()
          //4.unshift()添加在最前面,可以添加多个
          //this.letters.unshift(\'aaa\',\'bbb\',\'ccc\')
          //5.splice():删除元素/插入元素/替换元素
          //splice(1,1)再索引为1的地方删除一个元素,第二个元素不传，直接删除后面所有元素
          //splice(index,0,\'aaa\')再索引index后面删除0个元素，加上\'aaa\',
          //splice(1,1,\'aaa\')替换索引为1的后一个元素为\'aaa\'
          // this.letters.splice(2,0,\'aaa\')
          //6.sort()排序可以传入一个函数
          //this.letters.sort()
          //7.reverse()反转
          // this.letters.reverse()

        },
        btn2(){
          this.letters[0]=\'f\'
        }
      }
    })
  </script>
</body>
</html>

以上是关于数组的响应式方法的主要内容，如果未能解决你的问题，请参考以下文章

html 将以编程方式附加外部脚本文件的javascript代码片段，并按顺序排列。用于响应式网站，其中ma

Vue3官网-高级指南（十七）响应式计算`computed`和侦听`watchEffect`（onTrackonTriggeronInvalidate副作用的刷新时机`watch` pre）(代码片段