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

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

st紫月

3061人浏览 · 2021-11-16 00:52:34

st紫月 · 2021-11-16 00:52:34 发布

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^