vue学习--常用特性(七、数组相关API)

变异方法和替换数组

1. 变异方法(修改原有数据)

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

2. 替换数组(生成新的数组)

  • filter()
  • concat()
  • slice()
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <span>
        <input type="text" v-model='fname'>
        <button @click='add'>添加</button>
        <button @click='del'>删除</button>
        <button @click='change'>替换</button>
      </span>
    </div>
    <ul>
      <li :key='index' v-for='(item,index) in list'>{{item}}</li>
    </ul>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      Vue数组操作
      1、变异方法：会影响数组的原始数据的变化。
      2、替换数组：不会影响原始的数组数据，而是形成一个新的数组。
    */
    var vm = new Vue({
      el: '#app',
      data: {
        fname: '',
        list: ['apple','orange','banana']
      },
      methods: {
        add: function(){
          this.list.push(this.fname);
        },
        del: function(){
          this.list.pop();
        },
        change: function(){
          this.list = this.list.slice(0,2);
        }
      }
    });
  </script>
</body>
</html>

3. 修改响应式数据

  • Vue.set(vm.items, indexOfItem, newValue)
  • vm.$set(vm.items, indexOfItem, newValue)
    ① 参数一表示要处理的数组名称
    ② 参数二表示要处理的数组的索引
    ③ 参数三表示要处理的数组的值
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for='item in list'>{{item}}</li>
    </ul>
    <div>
      <div>{{info.name}}</div>
      <div>{{info.age}}</div>
      <div>{{info.gender}}</div>
    </div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      动态处理响应式数据
      
    */
    var vm = new Vue({
      el: '#app',
      data: {
        list: ['apple', 'orange', 'banana'],
        info: {
          name: 'lisi',
          age: 12
        }
      },
    });
    // vm.list[1] = 'lemon';
    // Vue.set(vm.list, 2, 'lemon');
    vm.$set(vm.list, 1, 'lemon');
 
    // vm.info.gender = 'male';
    vm.$set(vm.info, 'gender', 'female');
 
    
  </script>
</body>
</html>
posted @   一纸年华  阅读(4)  评论(0)  编辑  收藏  举报  
相关博文：
· vue学习--常用特性(一、表单操作)
· vue学习--组件化开发(三、组件间数据交互)
· 12_变异方法和替换数组
· Vue中的变异方法和替换数组
· vue基础 v-for的基础使用、阻止默认事件、event的传值等操作
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示

目录导航

变异方法和替换数组
1. 变异方法(修改原有数据)
2. 替换数组(生成新的数组)
3. 修改响应式数据