Analysis of class and style binding and conditional and list rendering in Vue

This article shares with you the analysis of class and style binding as well as condition and list rendering in Vue. Friends in need can refer to it

Goal:

1. Proficient in using various methods of class and style binding

2. Familiar with the usage of v-if and v-for, as well as the precautions for using v-if and v-for together

Many ways to bind class and style

1. Both class and style are bound using v-bind, which is:

2. Whether it is binding class or style, there are two ways, one is an object and the other is an array.

3. class and :class are Coexistence

Binding example

1.class object binding

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

2.class array binding

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

3 .style object binding

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

4.style array binding

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

Usage of v-if and v-for

Conditional rendering

1. v-if="expression", the true or false value of the expression determines whether to mount it on the page

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

2.v-show="expression", the true or false value of the expression determines whether the The display attribute of the node is none / block

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

3. Difference: The functions are the same, whether the node is displayed or not, but v-if will operate the dom and re-render the page

4. For v-if, there are two commands: v-if-else and v-else, but they must be used together without being separated by anything else. The usage rules are the same as the if..else statement of js

List rendering

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. Loop rendering object

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

3. Generally, a key value is added to avoid mutual influence (syntax The detection will detect this. After adding the key value, they will be distinguished from each other and the same part will be re-rendered and will not be reused)

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

4.key and index are optional

v -Notes on using if and v-for together

1.v-for has a higher priority than v-if. If they are on the same node, v-if will be run repeatedly on each In the v-for loop.
That is, execute v-for first, and each item coming out of v-for will execute v-if once.

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

2. If you want to execute v-if first and then To determine whether to execute v-for, you can place v-if on the outer element (or template).

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

Related recommendations:

Template syntax and calculated properties of Vue , Listener analysis

For vue instance analysis

The above is the detailed content of Analysis of class and style binding and conditional and list rendering in Vue. For more information, please follow other related articles on the PHP Chinese website!