改变Vue的data数组数据，实时响应到页面当中

最新推荐文章于 2023-11-21 16:19:13 发布

st紫月

最新推荐文章于 2023-11-21 16:19:13 发布

阅读量3.1k

点赞数

分类专栏： vue框架文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/ziyue13/article/details/121347108

版权

vue框架专栏收录该内容

31 篇文章

订阅专栏

本文通过一个Vue实例展示了如何在数据变化时实时更新视图。当直接修改data中的变量值时，页面会实时刷新，但更新数组则需要使用Vue.set或this.$set方法。示例中，dianji2函数演示了如何替换数组中的一项，而dianji3函数则展示了如何替换整个数组以触发视图更新。了解这些技巧对于理解和优化Vue应用的性能至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.如果直接改变data当中的变量的值，页面会实时刷新，如果更新数组的话页面不会实时刷新，需要用到一个函数
Vue.set(this.person,0,{msg:‘hh’})
//this.$set(this.person,0,{msg:‘hh’})
这两个函数是一样的，第一个参数是需要改变的data数组，第二个参数是这个数组对应的下标，第三个数据是需要替换的值
如果想要替换一整个数组，就用循环一个一个替换就行

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
		</style>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{str}}
			<ul v-for="item in person">
				{{item.msg}}
			</ul>
			<button type="button" @click="dianji1">更新str</button>
			<button type="button" @click="dianji2">更新数组的某一个值</button>
			<button type="button" @click="dianji3">替换整个数组</button>
		</div>
		
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data(){
					return{
						str:'123',
						person:[
							{
								msg:'66',
							},
							{
								msg:'55',
							}
						]
					}
				},
				methods:{
					dianji1:function(){
						this.str='321';
					},
					dianji2:function(){
						Vue.set(this.person,0,{msg:'hh'})
						//this.$set(this.person,0,{msg:'hh'})
					},
					dianji3:function(){
						var k = [
							{
								msg:'1'
							},
							{
								msg:'2'
							},
							{
								msg:'3'
							},
							{
								msg:'4'
							},{
								msg:'5'
							}
						]
						for(var i = 0 ;i<5;i++){
							Vue.set(this.person,i,k[i])
						}
					}
				}
				
			})
			
		</script>
		
	</body>
</html>