vue.js从入门到深入再到随心而用————数组的变异方法和替换数组以及动态响应式数据处理

本文链接：https://blog.csdn.net/qq_42147171/article/details/105201339

数组的变异方法和替换数组以及动态响应式数据处理

1.数组的变异方法

在 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>
      </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);//添加到最后
		  this.list.unshift(this.fname);//添加到最前
        },
        del: function(){
         // this.list.pop();删除数组的最后一个元素
		  //this.list.shift();删除数组第一个元素
		 // this.list.splice(0,1); 有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除 后想要在原位置替换的值
        },
        change: function(){
          this.list = this.list.slice(0,2);//slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子数组
		  
        }
      }
    });
  </script>
</body>
</html>

2.替换数组

不会改变原始数组，但总是返回一个新数组
>上面涉及到了slice这里就讲讲另外两个函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/jscript" src="../js/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="item in arr2">{{item}}</li>
			</ul>
			<input type="button" value="concat" @click="concat"/>
			<input type="button" value="filter" @click="filter"/>
		</div>
		<script type="text/javascript">
			var example=new Vue({
				el:'#app',
				data:{
					arr:[1,2,5,5,5,6],
					arr2:[]
				},
				methods:{
					filter:function(){
						this.arr2=this.arr2.filter(function(item,index,arr2){//function为回调函数
							return item>5 //返回值大于5的数据
						})
					},
					concat:function(){
						this.arr2=this.arr.concat(55,66);//将arr再加上55和66添加到arr2中
					}
				}
			})
		</script>
	</body>
</html>

效果：

点击concat前arr2为空所以页面上的没有任何显示
一次点击concat和filter出现如下效果

3.动态响应式数据处理

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>