Loading

12_变异方法和替换数组

变异方法：

在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变。

变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展。

<!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>
        <button @click='filter'>过滤</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);
        },
        filter() {
          console.log(this.list.filter(item => item.length == 6));
        }
      }
    });
  </script>
</body>

</html>

替换数组

不会改变原始数组，但总是返回一个新数组

动态数组响应式数据

通过索引直接操作数组或对象时，数据是不具备响应式功能的。

Vue.set(a,b,c) 让 触发视图重新更新一遍，数据动态起来。a是要更改的数据 、 b是数据的索引、 c是更改后的数据。

<!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 @ 2022-08-07 11:39  1640808365  阅读(32)  评论(0)  编辑  收藏  举报