vue의 vue.set에는 여러 매개변수가 있습니다.-View.js-php.cn

vue의 vue.set에는 여러 매개변수가 있습니다.

藏色散人

풀어 주다： 2023-01-13 00:44:57

원래의

4030명이 탐색했습니다.

vue.set에는 3개의 매개변수가 있습니다. 즉, 1. 변경될 데이터 소스를 나타내는 대상, 2. 변경될 특정 데이터를 나타내는 키, 3. 재할당된 값을 나타내는 값.

vue의 vue.set에는 여러 매개변수가 있습니다.

이 문서의 운영 환경: windows10 시스템, vue2.9, Dell G3 컴퓨터.

Vue.set()

Vue.set( target, key, value )

로그인 후 복사

매개변수:

target: 변경할 데이터 소스(객체 또는 배열일 수 있음)
key: 변경할 특정 데이터
value: re 할당된 값

공식 API: Vue.set()

Vue.set 사용법

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app2">
    <p v-for="item in items" :key="item.id">
        {{item.message}}
    </p>
    <button @click="btn2Click()">动态赋值</button><br/>    
    <button @click="btn3Click()">为data新增属性</button>
</div>
<script src="../../dist/vue.min.js"></script>
<script>
var vm2=new Vue({
    el:"#app2",
    data:{
        items:[
            {message:"Test one",id:"1"},
            {message:"Test two",id:"2"},
            {message:"Test three",id:"3"}
        ]
    },
    methods:{
        btn2Click:function(){
            Vue.set(this.items,0,{message:"Change Test",id:&#39;10&#39;})
        },
        btn3Click:function(){
            var itemLen=this.items.length;
            Vue.set(this.items,itemLen,{message:"Test add attr",id:itemLen});
        }
    }
});
</script>
</body>
</html>

로그인 후 복사

이때 페이지는 이렇습니다

vue의 vue.set에는 여러 매개변수가 있습니다.

첫번째 버튼을 누르고 실행해보겠습니다 메소드의 btn2Clcick 메소드, 이번에는 Test 1을 Change Test

vue의 vue.set에는 여러 매개변수가 있습니다.

로 변경하고 싶습니다. 실행 후 결과: 이때 목록의 첫 번째 열에 있는 Test 1이 Change Test

vue의 vue.set에는 여러 매개변수가 있습니다.

가 되었습니다.

주의해야 할 상황이 있습니다.

JS 작성에 익숙해지면 배열의 특정 첨자에 있는 데이터를 변경하고 싶을 수도 있습니다. this.items[XX] 등을 직접 변경하겠습니다. as:

btn2Click:function(){
  this.items[0]={message:"Change Test",id:&#39;10&#39;}
}

로그인 후 복사

결과를 살펴보겠습니다.

vue의 vue.set에는 여러 매개변수가 있습니다.

이 상황은 JavaScript 제한으로 인해 Vue가 데이터 변경을 감지할 수 없으므로 데이터를 동적으로 변경해야 하는 경우 Vue 문서에 명확하게 명시되어 있습니다. , Vue.set()은 우리의 요구를 완벽하게 충족할 수 있습니다.

자세히 살펴보는 학생들은 '버튼이 뭐하는 데 있지 않나요?'라고 물을 수도 있습니다.

직접 살펴보겠습니다:

vue의 vue.set에는 여러 매개변수가 있습니다.

이것은 초기 목록 데이터입니다. 데이터에는 세 개의 객체가 있습니다.

클릭 후:

vue의 vue.set에는 여러 매개변수가 있습니다.

여기서 Vue.set()은 수정할 수 없다는 것을 알 수 있습니다. 데이터를 추가하는 기능은 Vue 배열 변형 방법의 단점을 보완합니다

팁: Vue.set()은 메서드에서 this.$set()으로 작성할 수도 있습니다

권장: "vue 튜토리얼 "

위 내용은 vue의 vue.set에는 여러 매개변수가 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!