vue学习笔记-16-vue的数组方法

最新推荐文章于 2024-02-23 09:27:13 发布

笑道三千

最新推荐文章于 2024-02-23 09:27:13 发布

阅读量751

点赞数

分类专栏： # vue基础

本文链接：https://blog.csdn.net/weixin_42349568/article/details/108238157

版权

vue基础专栏收录该内容

37 篇文章 1 订阅

订阅专栏

一，数组的方法

在这里插入图片描述
vue页面上的数据和vm中的数据是实时一致的，而原生的数组方法无法实现这一点，所以vue中的数组方法经过了二次处理。然而用法还是和之前的一样。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<style type="text/css">
			#app{
				width: 20%;
				margin: 200px auto;
				border: 1px solid #ccc;
				line-height: 30px;
				padding: 20px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="box">
				<input type="text" v-model="fname" />
				<button @click="add">增加数据</button>
				<button @click="del">销毁数据</button>
				<button @click="cha">生成新数组</button>
				<ul>
					<li v-for="(item,index) in list">{{item}}</li>
				</ul>
			</div>
		</div>
		 
		<script type="text/javascript" src="./js/vue.min.js"></script>
		<script type="text/javascript">
			
			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()
					},
					//以上的两个方法都是直接变更原数据
					cha:function(){
						this.list=this.list.splice(0,2)
						//这个方法是生成新的数组，为了页面数据同步变化，
						//需要重新赋值给this.list
					}
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述

二，vue提供的方法

通过索引的方式，也是可以更改数组的值的，但是同样的，这种更改不是响应式的！
为了达到响应式的目的，vue提供了新的方式：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<style type="text/css">
			#app{
				width: 20%;
				margin: 200px auto;
				border: 1px solid #ccc;
				line-height: 30px;
				padding: 20px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="box">
				<input type="text" v-model="fname" />
				<button @click="edi">修改数据</button>
				<button @click="edi2">原生修改数据</button>
				<ul>
					<li v-for="(item,index) in list">{{item}}</li>
				</ul>
			</div>
		</div>
		 
		<script type="text/javascript" src="./js/vue.min.js"></script>
		<script type="text/javascript">
			
			var vm=new Vue({
				el: "#app",
				data:{
					fname:'',
					list:['apple','orange','banana']
				},
				methods:{
					edi:function(){
						this.$set(this.list,2,'lemon')
						// vue提供的方法:可以数据同步变更的
					},
					edi2:function(){
						this.list[2]="wahaha"
						// 原生的,数据无法响应到页面
					}
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述
此时vm中的数据已经发生变化：

若使用原生的方法，利用数组的索引值进行修改，则达不到响应式的效果：

但是vm中的数据已经发生了变化：

笑道三千

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue学习笔记-16-vue的数组方法

vue页面上的数据和vm中的数据是实时一致的，而原生的数组方法无法实现这一点，所以vue中的数组方法经过了二次处理。然而用法还是和之前的一样。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/base.css"/> &l.
复制链接

扫一扫