操作数组的函数简介

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <li v-for="(item,index) in items" :key="index">{{item}}---->{{index}}</li>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                items: ['zhangsan', 'lisi', 'wangwu']
            }
        });
         // 为数组添加元素
        vm.items.push('yello');
         // 对数组进行排序
        vm.items.sort();
         // 对数组进行逆向排序
        vm.items.reverse();
         // splice(index,len,[item])
        // index:数组开始下标
        // len: 替换/删除的长度
        // item:替换的值,删除操作的话item为空。
        vm.items.splice(1,0,"gou");
    </script>
</body>
</html>
 
2、替换元素示例
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <li v-for="(item,index) in items" :key="index">{{item}}---->{{index}}</li>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                items: ['zhangsan', 'lisi', 'wangwu']
            }
        });
         // vm.$set(vm.items, indexOfItem, newValue) 替换元素
       vm.$set(vm.items,2,'goudan')

    </script>
</body>

</html>

猜你喜欢

转载自www.cnblogs.com/kukai/p/12409951.html