What does vue conditional rendering include?

Vue conditional rendering instructions include v-if, v-else, v-else-if, and v-show. The v-if directive is used to conditionally render a piece of content. This content will only be rendered when the expression of the directive returns a true value; v-else can add an "else block" to v-if, v-else -if can add an "else if block" to v-if. v-show determines whether to display an element or component based on a condition, relying on the control display attribute.

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

Conditional rendering

• #In some cases, we need to decide whether certain elements or components should be rendered based on the current conditions. At this time we need to make conditional judgments.
• Vue provides the following instructions for conditional judgment:
  • v-if
  • v-else
  • v-else-if

  • v-show

Let’s learn about them.

v-if、v-else、v-else-if

• ##v-if、v-else、v-else-if Used to render a certain piece of content based on conditions:
  These contents will only be rendered when the condition is true;
  • These three instructions are consistent with JavaScript The conditional statements if, else, else if are similar; the
    v-if instruction is used to conditionally render a piece of content. This piece of content will only be rendered when the expression of the instruction returns a true value.
    v-else can add an "else block" to v-if.
    v-else-if provides the "else if block" corresponding to v-if. It can be reused many times in a row.

##v-if rendering principle:

• v -if is lazy;
  • When the condition is false, the judged content will not be rendered at all or will be destroyed;
  • When the condition is true, it will Really render the content in the conditional block;

template element

Because v-if is an instruction, it must be added To an element:

• But what if we want to switch multiple elements?
  • At this time we render the div, but we do not want elements like div to be rendered;
  • At this time, we can choose to use template;
The template element can be used as an invisible wrapping element and used on v-if, but in the end the template will not be rendered:

• is somewhat similar to that in a mini program block

Let’s learn about the three instructions v-if, v-else, and v-else-if through examples.

v-ifAs mentioned earlier

v-if

Judge the DOM based on the value of the expression generate elements. For example: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;!-- template --&gt; &lt;div&gt;     &lt;h1 id=&quot;v-if的值为true时-显示这个div元素&quot;&gt;v-if的值为true时，显示这个div元素&lt;/h1&gt; &lt;/div&gt; // JavaScript var app = new Vue({     el: '#app',     data: {     } })</pre><div class="contentsignin">Copy after login</div></div>At this time, the

<h1></h1>

element is inserted into the div#app element and rendered:

In Vue, if you need to determine whether an element is rendered, add the

v-if

directive to the element and set its value to true or false. For example, in the above example, we set true and the element is rendered. If you change the true value above to false, the <h1></h1> element will not be rendered. In addition to directly setting

true

or false to v-if, you can also make judgments through expressions. For example: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;!-- template --&gt; &lt;div&gt;     &lt;h1&gt;     v-if的值为true时，显示这个div元素     &lt;/h1&gt; &lt;/div&gt; // JavaScript     var app = new Vue({     el: '#app',     data: { isShow: true } })</pre><div class="contentsignin">Copy after login</div></div>In the above example, the value of

isShow

is declared to be true, and then in the h1 element, pass v-if directive bindingisShow. In fact, it is similar to v-if="true". The h1 element also renders normally:

When you set

isShow

to false , the h1 element will not be rendered.

What we see above is rendering one element. If we want to render multiple elements, should we directly nest multiple elements inside? Let’s verify our thoughts:

<!-- template -->
<div>
    <div>
        <h1 id="我是标题">我是标题</h1>
        <p>我是段落</p>
    </div>
</div>

is just as we imagined. But in Vue, when we switch multiple elements, we generally don’t use it this way. Instead, we use the

The above is the detailed content of What does vue conditional rendering include?. For more information, please follow other related articles on the PHP Chinese website!