Usage scenarios of conditional rendering functions in Vue documentation

Vue is one of the most popular JavaScript frameworks. It provides many practical tools and components, allowing developers to efficiently develop complex web applications. Among them, conditional rendering is a very important part of Vue. It can help us render different content under different circumstances and achieve dynamic effects. Below we will introduce in detail the usage scenarios of conditional rendering in the Vue document.

1. Implement conditional rendering through v-if and v-else

v-if and v-else are the most commonly used conditional rendering functions in the Vue framework. They can render different renderings based on conditions. HTML elements, for example:

<div v-if="isTrue">条件为真时显示的内容</div>
<div v-else>条件为假时显示的内容</div>

In the above code, we use the v-if directive. If isTrue is true, then the first div element will be rendered, otherwise the second div element will be rendered. . This is the simplest way of conditional rendering in Vue.

In addition to the above examples, v-if and v-else can also be used with the v-for directive. They can dynamically generate corresponding HTML elements based on the length of the array, for example:

<ul>
  <li v-for="item in itemList" v-if="item.isShow">{{item.value}}</li>
  <li v-else>没有符合条件的数据</li>
</ul>

In the above code, if there is a qualified item element in the itemList array, the corresponding li element will be generated and the value will be displayed. Otherwise, "No qualifying data" will be displayed.

2. Implement conditional rendering through v-show

The v-show instruction can also implement conditional rendering. Its usage is similar to v-if, but it will not destroy and rebuild DOM elements. Instead, you control the display and hiding of elements by controlling the display attribute of CSS. For example:

<div v-show="isTrue">条件为真时显示的内容</div>

In the above code, if isTrue is true, the div element will be displayed, otherwise the element will be hidden.

It should be noted that the v-show instruction cannot cooperate with the v-else instruction to perform corresponding logical processing like the v-if instruction.

3. Realize conditional rendering through computed attribute

In some special cases, we may need to dynamically display and hide HTML elements based on multiple conditions. In this case, we can use the computed attribute to achieve this. Conditional rendering, for example:

<div v-show="isShow">元素1</div>
<div v-show="isShow1">元素2</div>
<div v-show="isShow && isShow1">元素3</div>

<script>
export default {
  data() {
    return {
      type: '',
      status: ''
    }
  },
  computed: {
    isShow() {
      return this.type === 'A'
    },
    isShow1() {
      return this.status === 'B'
    }
  }
}
</script>

In the above example, we use the computed attribute to dynamically calculate the isShow and isShow1 attributes, and then dynamically display and hide different HTML elements based on the values ​​​​of these two attributes. .

4. Realize conditional style binding through v-bind:class

In addition to controlling the display and hiding of elements, we can also use the v-bind:class directive to dynamically bind based on conditions Defined style class, for example:

<div v-bind:class="{ active: isActive, 'text-secondary': !isActive }">条件渲染的样式</div>

<script>
export default {
  data() {
    return {
      isActive: false
    }
  }
}
</script>

In the above code, we use the v-bind:class directive to dynamically bind the style class. If isActive is true, the style will include the "active" class , otherwise the "text-secondary" class will be included in the style.

In addition to the v-bind:class instruction, the Vue framework also provides many practical style binding instructions, such as v-bind:style, v-bind:background-color, etc., which can be dynamic according to different conditions. Bind different style effects.

Summary: The Vue conditional rendering function is a very practical part of the Vue framework, which can help developers achieve dynamic HTML element display and style binding effects. The above examples are just some simple usage scenarios. In actual development, there are many other complex situations that need to be solved using conditional rendering functions. Developers need to choose the most suitable conditional rendering method based on actual needs.

The above is the detailed content of Usage scenarios of conditional rendering functions in Vue documentation. For more information, please follow other related articles on the PHP Chinese website!