Vue.set()데이터 동적 응답 을 실현 하 는 방법

vue 에서 우리 가 가장 많이 조작 하 는 것 은 바로 각종 데이터 입 니 다.jquery 에서 우 리 는 아래 표 시 를 통 해 데 이 터 를 찾 은 다음 에 다시 값 을 부여 하 는 습관 이 있 습 니 다.
예 를 들 어var a[0]=111;(회사 에서 용 서 를 빌 었 으 면 좋 겠 어 요.제 가 이런 코드 를 많이 썼어 요.😁）
아래 위 코드


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="./js/vue.min.js"></script>
</head>
<body>
  <div id="app">
     <ul>
       <li v-for="item in listData">{{item}}</li>
    </ul>
    <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" v-text="he" @click="changeData()"></a>
  </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      he:"  ",
      listData:["a","b","c"]
     },
    methods:{
       changeData () {
         this.listData[0]="d";
       }
      }
  })
</script>
</html>

내 가 단 추 를 눌 렀 을 때,아무런 변화 도 없 었 고,페이지 에는 여전히 a,b,c 가 있 었 다.
输入图片说明

vue 는 당연히 이렇게 못 하지.
다음은 위대 한 vue 내장 방법 입 니 다.
Vue.set()공식 설명:대상 의 속성 을 설정 합 니 다.대상 이 응답 식 이 라면 속성 이 생 성 된 후에 도 응답 식 이 고 보기 업 데 이 트 를 촉발 합 니 다.이 방법 은 Vue 에서 속성 이 추 가 된 제한 을 감지 하지 못 하 는 것 을 피 하 는 데 사 용 됩 니 다.
내 이 해 는 보 기 를 다시 업데이트 하고 데이터 가 움 직 이 는 것 이다.Vue.set(a,b,c)a 는 변경 할 데이터 b 는 데이터 의 몇 번 째 항목 c 는 변 경 된 데이터 입 니 다.
위의 데 이 터 를 변경 할 수 없 는 코드 를 해결 합 니 다.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="./js/vue.min.js"></script>
</head>
<body>
  <div id="app">
     <ul>
       <li v-for="item in listData">{{item}}</li>
    </ul>
    <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" v-text="he" @click="changeData()"></a>
  </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      he:"  ",
      listData:["a","b","c"]
     },
    methods:{
       changeData () {
         Vue.set(this.listData,0,'X')
       }
      }
  })
</script>
</html>

this.listdata 배열 의 첫 번 째 항목 이 변경 되 었 음 을 볼 수 있 습 니 다.
输入图片说明

총결산
위 에서 말씀 드 린 것 은 편집장 님 께 서 소개 해 주신 Vue.set()의 데이터 동적 응답 을 실현 하 는 방법 입 니 다.여러분 께 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!

Vue.set()데이터 동적 응답 을 실현 하 는 방법

좋은 웹페이지 즐겨찾기