인스턴스가 생성된 후 인스턴스에 새 속성을 추가하면 뷰 업데이트가 실행되지 않습니다.vue.set의 기능: 1. [Vue.set] 메서드를 통해 데이터 속성을 설정합니다. 코드는 [Vue.set(data,'sex', 'male')입니다. ]; 2. [vm.$set] 인스턴스 메소드를 사용합니다. 코드는 [var key = 'content';]입니다. ㅋㅋㅋ
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue $set</title> <script src="https://static.jb51.net/assets/vue/1.0.11/vue.min.js"></script> </head> <body> <div id="app"> 姓名:{{ name }}<br> 年龄:{{age}}<br> 性别:{{sex}}<br> 说明:{{info.content}} </div> <!-- JavaScript 代码需要放在尾部(指定的HTML元素之后) --> <script> var data = { name: "php中文网", age: '3', info: { content: 'my name is test' } } var key = 'content'; var vm = new Vue({ el:'#app', data: data, ready: function(){ //Vue.set(data,'sex', '男') //this.$set('info.'+key, 'what is this?'); } }); data.sex = '男';//不生效 </script> </body> </html>실행 결과:
姓名:php中文网 年龄:3 性别: 说明:my name is test
age에 get 및 set 메서드가 있습니다. 및 name 이지만 sex에는 이 두 가지 방법이 없으므로 vue는 sex 값을 설정한 후 뷰를 자동으로 업데이트하지 않습니다. 해결책: <script>
var data = {
name: "脚本之家",
age: '3',
info: {
content: 'my name is test'
}
}
var key = 'content';
new Vue({
el:'#app',
data: data,
ready: function(){
Vue.set(data,'sex', '男');
this.$set('info.'+key, 'what is this?');
}
});
</script>
1 위와 같이 Vue.set 방법을 통해 데이터 속성을 설정합니다. Vue.set(data,'sex', '男')
2 전역 Vue.set 메서드의 별칭이기도 한 vm.$set 인스턴스 메서드를 사용할 수도 있습니다: var key = 'content'; //这种主要用于当对象中某个属性值动态生成时处理方式
this.$set('info.'+key, 'what is this?');
//或
this.$set('info.content', 'what is this?');
JavaScript
(비디오)위 내용은 vue.set의 용도는 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!