数组的splice用法示例

数组总元素为对象操作示例:

<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <template v-for="user in userInfo">
        <li>姓名:{{user.name}}</li>
        <li>年龄:{{user.age}}</li>
        <li>--------------------</li>
      </template>
    </div>
    <script>
        var v=new Vue({
            el:"#app",
            data:{
                userInfo:[{name:"zhangsan",age:28},
                         {name:"lisi",age:28},
                ]
            }
        });
    //第一参数:数组中的索引, 第二参数 :要替换的个数, 第三个之后的参数:为要替换的值
        v.userInfo.splice(2,2,{name:'wangwu',age:30},{name:'zhaoliu',age:32});
    </script>
  </body>
</html>
 
数组中元素为普通元素的操作示例
 
<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <template v-for="user in userInfo">
        <li>姓名:{{user}}</li>
      </template>
    </div>
    <script>
        var v=new Vue({
            el:"#app",
            data:{
                userInfo:['zhangsan','lisi']
            }
        });
//第一参数:数组中的索引, 第二参数 :要替换的个数, 第三个之后的参数:为要替换的值
        v.userInfo.splice(2,2,'wangwu','zhaoliu');
//第一参数:数组中的索引, 第二参数 :要替换的个数,第三个参数为空,则为要删除 第二个参数值的个数据
        v.userInfo.splice(2,1);
    </script>
  </body>
</html>
posted @ 2020-05-09 12:21  玄空2  阅读(608)  评论(0编辑  收藏  举报