Vue中给对象添加属性页面不更新解决方法,代码编辑测试

			<html>
   <head>
      <title>Vue中给对象添加属性页面不更新解决方法	</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.0/vue.min.js">
      </script>
   </head>
   <body>
      <div id = "intro" style = "text-align:center;">
         <p>对象：{{ obj }}</p>
		 <button @click="addProp">添加属性</button>
      </div>
      <script type = "text/javascript">
         var vue_det = new Vue({
            el: '#intro',
			data() {
				return {
				  obj: {
					prop1: '属性1'
				  }
				}
			},
			mounted: function(){
				
			},
			methods:{			  
			  addProp(){
				Vue.set(this.obj,'prop2','新属性2')//方法1
				this.$set(this.obj,'prop3','新属性3')//方法2
				this.obj = Object.assign({},this.obj,{'prop4':'新属性4'})//方法3
			  }
			},
			
         });
      </script>
   </body>
</html>
                

Vue中给对象添加属性页面不更新解决方法在线测试，VueJS网页版在线编辑器,在编辑器上输入VueJS代码，可在线编辑运行VueJS,VueJS代码在线运行调试,VueJS在线编辑,VueJS代码在线编辑器,可快速在线测试您的VueJS代码,在线编辑VueJS代码发现是否存在错误。