Vue의 목록 렌더링 지침에 대한 간략한 분석: v-for

이 기사에서는 Vue의 목록 렌더링 명령인 v-for를 안내합니다. 도움이 되길 바랍니다!

Vue의 목록 렌더링

1.1.v-for

⭐⭐
개인적으로 사용법은 비슷하지만 형태는 for 루프인 것 같습니다. 다릅니다. 이해하시면 사용하실 수 있습니다. (학습 영상 공유: vue 영상 튜토리얼)

사용 방법;

1. 배열 탐색

v-for="item in 数组"

v-for="(item, index) in 数组"

배열 탐색의 예:

<div class="item" v-for="item in products">
    <h3 class="title">商品:{{item.name}}</h3>
    <span>价格:{{item.price}}</span>
    <p>秒杀：{{item.desc}}</p>
</div>

const app = Vue.createApp({
        data() {
          return {
            //2.数组 存放的是对象
            products: [
              { id: 11, name: "mac", price: 1000, desc: "99" },
            ],
          };
        },
      });

app.mount("#app");

2 객체 탐색도 지원합니다. , 1개, 2개 또는 3개의 매개변수를 지원합니다.

1개의 매개변수: "객체의 값";

• 2개의 매개변수: "객체의 (값, 키)"
• 3개의 매개변수: "(값, 키, 인덱스) in object”;
v-for는 숫자 탐색도 지원합니다.

각 항목은 숫자입니다.

<!-- 2.遍历对象 -->
      <ul>
        <li v-for="(value,key,index) in info">
          {{value}} - {{key}} - {{index}}
        </li>
      </ul>
 
 const app = Vue.createApp({
        data() {
          return {
            info: { bame: "why", age: 18, height: 1.88 },
          };
        },
      });
app.mount("#app");

3 문자열 탐색

<li v-for="item in 100">{{item}}</li>

1.2.v-for 및 템플릿 ⭐⭐

templ 요소를 사용하여 여러 요소가 포함된 콘텐츠 렌더링을 반복합니다.

여기서 div를 사용하는 것은 어떨까요?

이전에 공부할 땐 별 생각 없었는데 노트 정리하다가 이 문제를 발견했습니다.

이유

:

div로 래핑하면 div도 마찬가지입니다. render

• 그리고 template로 래핑하면 템플릿이 렌더링되지 않으므로 div를 사용하는 것보다 불필요한 div 태그를 사용하는 것이 절약됩니다.

사실 템플릿의 역할은 요소를 래핑하는 데 도움이 되는 템플릿 자리 표시자입니다. 템플릿은 페이지에 렌더링되지 않습니다.

div(div에 실제 의미가 없으면 템플릿을 사용하여 대체할 수 있습니다.)

• <div v-for="(value,key,index) in infos">
          <span>{{value}}</span>
          <strong>{{key}}</strong>
          <i>{{index}}</i>
  </div>

template

• <template v-for="(value,key,index) in infos">
          <span>{{value}}</span>
          <strong>{{key}}</strong>
          <i>{{index}}</i>
  </template>

1.3.v-배열 업데이트 감지용 ⭐⭐

Vue는 청취된 배열의 변경 메소드를 래핑하므로 보기 업데이트도 트리거합니다.

래핑된 메소드에는 다음이 포함됩니다.

:

push() 배열 뒤에 요소 삽입

• pop() 삭제 배열 뒤쪽의 요소
• shift() 배열 앞쪽의 요소 삭제
• unshift() 배열 앞쪽의 요소 삽입
• splice() 배열 잘라내기, 삽입 및 삭제
• sort() Sort
• reverse() reverse
이 메서드의 사용법은 실제로 js에서도 비슷합니다. 생각날 때 다시 찾아보세요

배열 교체 방법

위의 방법은 원본 배열을 직접 수정합니다.

• 그러나 일부 메서드는 원본 배열을 대체하지 않지만 filter(), concat() 및 Slice()와 같은 새 배열을 생성합니다.

• //并不是完整写法！！！
  
  <li v-for="item in names">{{item}}</li>
  names: ["abc", "bac", "aaa", "cbb"],
  // 1.直接将数组修改为一个新的数组
  this.names = ["cc", "kk"];
  
  // 2.通过一些数组的方法，修改数组中的元素
  this.names.push("cc");
  this.names.pop();
  this.names.splice(2, 1, "cc");
  this.names.sort();
  this.names.reverse();

  [관련 비디오 튜토리얼 권장 사항: vuejs 입문 튜토리얼

  、웹 프론트엔드 시작하기】

  위 내용은 Vue의 목록 렌더링 지침에 대한 간략한 분석: v-for의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!