vue v-for 데이터 처리를 설명하는 예

앞서 vue 컴포넌트의 v for 명령 소개와 v-for 사용 시 알람 문제 분석에 대해 공유했습니다. 이번 글에서는 vue v-for 데이터 처리 및 v의 기본 사용법을 공유하겠습니다. -for: 탐색하려면 v-for= "item in list" 또는 v-for="item of list"를 사용하고 list:list:[{n:1},{n:2},{n:3}, {n:4},{n:5},{n:6}] 확장을 촉진하고 실제 프로젝트 요구에 더 가까워지기 위해.

 <p id="app">
        <ul>
            <li v-for="item in list">{{item.n}}</li>
        </ul>
    </p>
    </body>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                list:[{n:1},{n:2},{n:3},{n:4},{n:5},{n:6}]
            }
        })
    </script>

v-for는 두 개의 매개변수 키와 인덱스를 제공합니다

순회된 데이터는 배열과 객체로 나누어 별도로 처리해야 합니다

배열 아래에는 키 값이 없습니다

그리고 매개변수 키 값의 실제 표시는 객체 아래에서 획득됩니다. 효과는 다음과 같습니다:

<p id="app">
        <ul>
            <li v-for="(item,index,key) of list">{{item.n}}
                <p>index={{ index }}</p>
                <p>key={{key}}</p>
            </li>
        </ul>
        <p>
            <p v-for="(item,key,index) of obj">
                {{item}}：{{key}}：{{index}}
            </p>
        </p>
    </p>
    </body>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                list:[{n:11},{n:22},{n:33},{n:44},{n:55},{n:66}],
                obj:{color:'red',age:18,sex:'girl'}
            }
        })
    </script>

v-for는 동일한 수의 반복을 지원합니다

v-for="n 10"<br>

이를 사용하면 데이터를 단계별로 로드할 수 있으며 m 값만 제어할 수 있습니다

  <p v-for="i of m">
                {{list[i-1].n}}
            </p>
    </p>
    </body>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                m:3,
                list:[{n:11},{n:22},{n:33},{n:44},{n:55},{n:66}],
                obj:{color:'red',age:18,sex:'girl'}
            }
        })
    </script>

참고:

객체를 탐색할 때는 이 바인딩 구성 요소를 사용할 수 없습니다. 처리 함수 값을 사용하여 현재 목록을 선택한 다음 작업을 수행합니다.

<ul>
            <li v-for="(item,index,key) of list">{{item.n}}
                <p>index={{ index }}</p>
                <p>key={{key}}</p>
                <p v-on:click="removethis(index)">remove this</p>
            </li>
        </ul>

<br>

methods:{
         removethis:function(index){
             this.list.splice(index,1)

데이터 배열 app.list[1]={n:33}에 대한 직접 할당 작업은 페이지 업데이트를 트리거할 수 없습니다

vue js는 Vue.set를 제공합니다. (app .list,1,{n:33}) 배열 데이터 업데이트 방법

관련 권장 사항:

Vue 구성 요소 소개 및 v-for 사용 시 알람 문제 분석

Vue.js 공통 명령 튜토리얼 루프에서 v-for 명령 사용

vue.js 명령 v-사용 및 인덱스 획득

위 내용은 vue v-for 데이터 처리를 설명하는 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!