집 >웹 프론트엔드 >JS 튜토리얼 >Vue의 클래스 및 스타일 바인딩, 조건부 및 목록 렌더링 분석

Vue의 클래스 및 스타일 바인딩, 조건부 및 목록 렌더링 분석

不言원래의: 2018-07-17 16:41:372667검색

이 기사에서는 Vue의 클래스 및 스타일 바인딩과 조건 및 목록 렌더링에 대한 분석을 공유합니다. 도움이 필요한 친구들은 이를 참고할 수 있습니다

목표:

클래스 및 스타일 바인딩을 사용하는 다양한 방법에 능숙해지기
v-if와 v-for의 사용법과 v-if와 v-for를 함께 사용할 때 주의사항을 숙지하세요

클래스와 스타일을 묶는 다양한 방법

클래스와 스타일을 묶는 것 모두 v-bind를 사용하세요. 즉,
클래스를 바인딩하든 스타일을 바인딩하든 두 가지 방법이 있습니다. 하나는 객체이고 다른 하나는 배열입니다.
class 및 :class coexist

Binding example

1.class 객체 바인딩

    <!-- 根据isActivity的真假,判断是否应用activity这个class -->
    <p :class="{activity:isActivity}"></p>

2.class 배열 바인딩

    <!-- 应用数组里面的class -->
    <p :class="[activity, activityOne]"></p>

3.style 객체 바인딩

    <!-- 应用这个样式对象的样式 -->
    <p :style="styleObj"></p>  
    
    <script>
    ...
    //styleObj写在data里面
    data() {
        return {
            styleObj: {
                color: &#39;black&#39;
            }
        }
    }
    ...
    </script>

4.style 배열 바인딩

    <!-- 应用这个数组里面的样式 -->
    <p :style="[styleObj,{fontSize:&#39;25px&#39;}]"></p>

v-if 및 v-for Usage

조건부 렌더링

1 .v-if="expression", 표현식의 true 또는 false 값은 페이지에 마운트할지 여부를 결정합니다

     <p v-if="isTrue">这一段会在html里面,而且会显示出来</p>
     <p v-if="isFalse">这段不会在html里面,也不会显示出来</p>

2.v-show="expression", 표현식 true 및 false 값은 노드의 표시 속성은 none/block

     <p v-show="isTrue">display: block,会显示出来</p>
     <p v-show="isFalse">display: none,不会显示出来</p>

3. 차이점: 노드 표시 여부에 관계없이 기능은 동일하지만 v-if는 DOM을 작동하고 페이지를 다시 렌더링합니다

4.v- if에는 v-if-else와 v-else라는 두 가지 명령이 있지만 따로 구분하지 않고 함께 사용해야 합니다. 사용 규칙은 js

List 렌더링

의 if..else 문과 동일합니다.

1.v-for of

     <li v-for="item of list">{{item}}</li>   //其中list为数组,item为数组元素
     <li v-for="(item,index) of list">{{index}}{{item}}</li>  //其中list为数组,index为索引(第一个0开始),item为数组元素

2. 루프 렌더링 객체

     //其中userInfo为对象, item为值, key为键, index为索引
     <li v-for="(item, key, index) of userInfo">{{item}}{{key}}{{index}}</li>

3. 일반적으로 상호 영향을 피하기 위해 키 값이 추가됩니다(구문 감지는 이를 감지합니다. 키 값을 추가한 후에는 서로 구별됩니다). 서로 독립적이며 동일한 부분도 다시 렌더링되며 재사용되지 않습니다)

     <li v-for="(item, index) of list" :key="index"></li>
   或<li v-for="(item, index) of list" :key="item.id"></li>

4.key와 index는 선택 사항입니다

v-if와 v-for를 함께 사용할 때 주의 사항

1.v -for는 v-if High보다 우선순위가 높으며, 동일한 노드에 있으면 v-if가 각 v-for 루프에서 반복적으로 실행됩니다.
즉, v-for가 먼저 실행되고 v-if가 실행됩니다. v-for에서 나오는 항목마다 한 번씩 실행됩니다. .

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

2. v-if를 먼저 실행한 다음 v-for를 실행할지 여부를 결정하려면 v-if를 외부 요소에 배치하면 됩니다. 템플릿).

<ul v-if="todos.length">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</ul>
<p v-else>No todos left!</p>