Vue.数组非变异方法以及动态响应数据-Vue-前端日记簿

首页 Vue 正文

Vue.数组非变异方法以及动态响应数据

2023-07-14 156

1. 数组的非变异方法在vue中的应用

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

Filter

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
   <div id="app">
        <h1>数组的非变异方法在vue中的应用</h1>
        <button @click="retain">保留非数字</button>
        <hr>
        <p>原数组：</p>
        <ul>
            <li v-for="(item,index) in list">{{item}}</li>
        </ul>
        <hr>
        <p>返回的新数组：</p>
        <ul v-for="(item,index) in newList">{{item}}</ul>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data(){
                return {
                    list: [10,'apple',50,'orange',9,32,'banana',19,22,50],
                    newList:[]
                }
            },
            methods:{
                retain(){
                    //  过滤数组
                    // 检查 符合条件的内容，将符合条件的内容，存储到 新的数组中
                    this.newList = this.list.filter(function(item){
                        return typeof item === 'string'
                    })
                }
            }
        })
    </script>
</body>
</html>

预览：

concat：

concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组。

 <div id="app">
        <h1>数组的非变异方法在vue中的应用</h1>
        <button @click="myconcat">连接，合并数组</button>
        <hr>
        <ul>
            <li v-for="item in concatData">{{item}}</li>
        </ul>

    </div>

    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data(){
                return {
                    list: ['apple','orange','banana'],
                    list2: ['1', '4', 20],
                    concatData: []
                }
            },
            methods:{
                myconcat(){
                    // 把 合并之后的数组，存储到 这个空数组中
                    this.concatData = this.list.concat(this.list2);

                    // 不能用下面 这种写法，写，因为 这样操作，我们 仅仅 是 把操作后的内容 返回到新数组中，
                    // 这时 ，this.concatData  还是个空数组
                    // this.concatData.concat(this.list,this.list2);
                }
            }
        })
    </script>

预览;

slice：

slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改原数组，而是返回一个子数组。

<!DOCTYPE html>
<html>
<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>
    <div>
        <p>原数组</p>
        <ul>
            <li v-for="(item,index) in list">{{index}}------{{item}}</li>
        </ul>
    </div>

    <hr>
    <div>
        <p>截取后的新数组：</p>
        <ul>
            <li v-for="item in newList">{{item}}</li>
        </ul>
    </div>
  </div>
 <script src="./js/vue.js"></script>
  <script type="text/javascript">
    /*
      Vue数组操作
      1、变异方法：会影响数组的原始数据的变化。
      2、非变异方法：不会影响原始的数组数据，而是形成一个新的数组。
    */
    var vm = new Vue({
      el: '#app',
      data: {
        fname: '',
        list: ['apple','orange','banana'],
        newList:[]
      },
      methods: {
        add:function(){
          this.list.push(this.fname);
          this.fname = '';
        },
        del:function(){
          this.list.pop();
        },
        change:function(){
            this.newList = this.list.slice(0,2);
        }
      }
    });
  </script>
</body>
</html>

预览：

2. 动态处理响应式数据

Vue.set() 触发视图，重新更新

Vue.set(a,b,c) 让触发视图重新更新一遍，数据动态起来

a是要更改的数据、 b是数据的第几项、 c是更改后的数据

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        
    <div id="app">
        <h1>Vue.set 动态数组响应式数据</h1>
        <hr>
        <div>
            <p>数组：</p>
            <ul>
                <li v-for="item in list">{{item}}</li>
            </ul>
        </div>
        <hr>
        <div>
            <p>对象中的属性</p>
            <div>{{info.name}}</div>
            <div>{{info.age}}</div>
            <p>-- 把用Vue.set动态添加的数据，渲染到视图层 ---</p>
            <div>{{info.gender}}</div>
        </div>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        // vue实例
        var vm = new Vue({
            el:'#app',
            data(){
                return {
                    list: ['apple', 'orange', 'banana'],
                    info: {
                        name: 'lili',
                        age: 18
                    }
                }
            },
            methods:{

            }
        })
        // 在vue实例外面，访问vue实例中的数组，写法：
        console.log(vm.list);

        // 动态处理响应式数据

        // 操作数组
        // 写法1：
        // // Vue.set(a,b,c)
        // // 让 触发视图 重新更新一遍，数据动态起来
        // // a是要更改的数据 、   b是数据的第几项、   c是更改后的数据
        // Vue.set(vm.list, 1, 'date');

        // 写法2：
        // vm.$set(vm.list, 1, 'date')

        // 操作对象
        // 更改 某个已有属性上的值
        // Vue.set(vm.info, 'age' , 20)
        // 向对象 中 添加属性，并赋值
        // Vue.set(vm.info, 'gender', 'male');

        vm.$set(vm.info, 'age', 20);
        vm.$set(vm.info, 'gender', 'male');



    </script>
</body>
</html>

预览：

标签：

发表评论：取消回复

原文链接：http://1.15.94.33/?id=13

=========================================

http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台，请勿相信其他任何渠道。