doina

一个小菜鸟运维工程师.

vue 数组操作

  • 1.push方法, 在数组最后面添加元素
  • 2.unshift(): 在数组最前面添加元素
  • 3.pop(): 删除数组中的最后一个元素
  • 4.shift(): 删除数组中的第一个元素
  • 5.splice作用: 删除元素/插入元素/替换元素
    • 删除元素: 第二个参数传入你要删除几个元素(如果没有传,就删除后面所有的元素)
    • 替换元素: 第二个参数, 表示我们要替换几个元素, 后面是用于替换前面的元素
    • 插入元素: 第二个参数, 传入0, 并且后面跟上要插入的元素
  • 5.sort(): 对数组进行排序
  • 6.reverse(): 对数组进行翻转
  • 7.注意: 通过索引值修改数组中的元素, 不是响应式的, 不会刷新页面数据
  • 8.通过vue的set方法修改数组元素
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

    <div id="app">
        <ul>
            <li v-for="item in letters">{{item}}</li>
        </ul>
        <button @click="btnClick">按钮</button>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                letters: ['a', 'b', 'c', 'd']
            },
            methods: {
                btnClick() {
                    // 1.push方法, 在数组最后面添加元素
                    // this.letters.push('aaa')
                    // this.letters.push('aaaa', 'bbbb', 'cccc')

                    // 2.unshift(): 在数组最前面添加元素
                    // this.letters.unshift()
                    // this.letters.unshift('aaa', 'bbb', 'ccc')

                    // 3.pop(): 删除数组中的最后一个元素
                    // this.letters.pop();

                    // 4.shift(): 删除数组中的第一个元素
                    // this.letters.shift();

                    // 5.splice作用: 删除元素/插入元素/替换元素
                    // 删除元素: 第二个参数传入你要删除几个元素(如果没有传,就删除后面所有的元素)
                    // 替换元素: 第二个参数, 表示我们要替换几个元素, 后面是用于替换前面的元素
                    // 插入元素: 第二个参数, 传入0, 并且后面跟上要插入的元素
                    // splice(start)
                    // splice(start):
                    this.letters.splice(1, 3, 'm', 'n', 'l', 'x')
                        // this.letters.splice(1, 0, 'x', 'y', 'z')

                    // 5.sort(): 对数组进行排序
                    // this.letters.sort()

                    // 6.reverse(): 对数组进行翻转
                    // this.letters.reverse()

                    // 7. 注意: 通过索引值修改数组中的元素, 不是响应式的, 不会刷新页面数据
                    // this.letters[0] = 'bbbbbb';
                    // this.letters.splice(0, 1, 'bbbbbb')

                    // 8. 通过vue的set方法修改数组元素
                    // set(要修改的对象, 索引值, 修改后的值)
                    // Vue.set(this.letters, 0, 'bbbbbb')
                }
            }
        })


        // function sum(num1, num2) {
        //   return num1 + num2
        // }
        //
        // function sum(num1, num2, num3) {
        //   return num1 + num2 + num3
        // }
        // 可变参数,个数不限
        // function sum(...num) {
        //   console.log(num);
        // }
        //
        // sum(20, 30, 40, 50, 601, 111, 122, 33)
    </script>

</body>

</html>
点赞

发表评论

邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据