Was beinhaltet das bedingte Vue-Rendering?

Vue-Anweisungen für bedingtes Rendering umfassen v-if, v-else, v-else-if und v-show. Die v-if-Direktive wird zum bedingten Rendern eines Inhalts verwendet. Dieser Inhalt wird nur dann gerendert, wenn der Ausdruck der Direktive einen wahren Wert zurückgibt. v-else kann einen „else-Block“ zu v-if, v-else hinzufügen -if kann einen „else if-Block“ zu v-if hinzufügen. v-show bestimmt anhand einer Bedingung, ob ein Element oder eine Komponente angezeigt werden soll, und stützt sich dabei auf das Anzeigeattribut des Steuerelements.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

Bedingtes Rendern

• In einigen Fällen müssen wir basierend auf den aktuellen Bedingungen entscheiden, ob bestimmte Elemente oder Komponenten gerendert werden sollen.
• Vue bietet die folgenden Anweisungen für die bedingte Beurteilung:
  • v-if
  • v-else
  • v-else-if

  • v-show

Nachfolgend erfahren Sie mehr darüber.

v-if, v-else, v-else-if

• v-if, v-else, v-else-if werden verwendet, um einen bestimmten Inhaltsblock basierend auf Bedingungen zu rendern:

  • Diese Inhalte werden nur gerendert, wenn die Bedingung erfüllt ist.

  • Diese drei Anweisungen ähneln den bedingten Anweisungen von JavaScript, wenn

    v-if-Anweisungen zum bedingten Rendern eines Inhalts verwendet werden wird nur gerendert, wenn der Ausdruck der Direktive „true“ zurückgibt.

    v-else kann einen „else-Block“ zu v-if hinzufügen.

    v-else-if stellt den „else if-Block“ bereit, der v-if entspricht. Es kann viele Male hintereinander wiederverwendet werden.

• v-if-Rendering-Prinzip:

  • v-if ist faul;
  • Wenn die Bedingung falsch ist, wird der beurteilte Inhalt überhaupt nicht gerendert oder zerstört ;

  • Wenn die Bedingung wahr ist, wird der Inhalt im Bedingungsblock tatsächlich gerendert;

Vorlagenelement

• Da v-if eine Anweisung ist, muss sie einem Element hinzugefügt werden:
  • Aber was wäre, wenn Wir wollen mehrere Elemente austauschen?
  • Zu diesem Zeitpunkt rendern wir das Div, aber wir möchten nicht, dass Elemente wie div gerendert werden.
  • Zu diesem Zeitpunkt können wir eine Vorlage verwenden. Das Vorlagenelement kann als unsichtbarer Wrapper verwendet werden Element und in v- Wird für if verwendet, aber die endgültige Vorlage wird nicht gerendert:
• ähnelt in gewisser Weise dem Block im Miniprogramm

  • Lernen wir etwas über v-if, v-else, v-else-if durch Beispiele Drei Anweisungen.
v-if

Wie bereits erwähnt, bestimmt v-if basierend auf dem Wert des Ausdrucks, ob Elemente im DOM generiert werden sollen. Zum Beispiel:

<!-- template -->
<div>
    <h1>v-if的值为true时，显示这个div元素</h1>
</div>

// JavaScript
var app = new Vue({
    el: '#app',
    data: {

    }
})

Zu diesem Zeitpunkt wird das Element <h1></h1> in das Element div#app eingefügt und wie folgt gerendert:
v-if

前面说到过v-if根据表达式来的值来判断在DOM中生成元素。比如：

<!-- template -->
<div>
    <h1>
    v-if的值为true时，显示这个div元素
    </h1>
</div>
// JavaScript
    var app = new Vue({
    el: '#app',
    data: { isShow: true }
})

这个时候<h1></h1>元素插入到div#app元素中，并渲染出来：

在Vue中，如果你需要让某个元素是否渲染，那就在该元素上添加v-if指令，并且设置其值为true或false。比如上面的示例，我们设置的是true，元素被渲染。如果把上面的true值换成false，<h1></h1>元素就不会渲染。

除了直接给v-if设置true或false之外，还可以通过表达式来做判断。比如：

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

上面的示例中，声明了isShow的值为true，然后在h1元素中，通过v-if指令绑定isShow。其实类似于v-if="true"。h1元素也正常渲染：

当你把isShow设置为false时，h1元素又不会渲染。

上面我们看到的是渲染一个元素,如果要渲染多个元素，那是不是直接里面嵌套多个元素呢？我们来验证一下自己的想法：

<template>
    <h1>标题</h1>
    <p>段落 1</p>
    <p>段落 2</p>
</template>

和我们想像的一样。但在Vue中，我们切换多个元素一般不这么使用，而是配合<template></template>元素当做包装元素，并在上面使用v-if。最终的渲染结果不会包含<template></template>

Wenn Sie in Vue feststellen müssen, ob ein Element gerendert wird, Fügen Sie dann einfach die Anweisung v-if zu diesem Element hinzu und setzen Sie seinen Wert auf true oder false. Im obigen Beispiel setzen wir beispielsweise true und das Element wird gerendert. Wenn der obige true-Wert durch false ersetzt wird, wird das <h1></h1>-Element nicht gerendert.

<!-- Template -->
<div>
    <h1>欢迎来到W3cplus！(^_^)</h1>
    <h1>请先登录，再来！(^_^)</h1>
</div>

// JavaScript
var app = new Vue({
    el: '#app',
    data: {
        isLogined: true
    }
})

<template>
    <figure>
        <figcaption>恭喜你中了5元红包</figcaption>
        <img  alt="Was beinhaltet das bedingte Vue-Rendering?" >
    </figure>
</template>

<template>
    <figure>
        <figcaption>亲，就差那么一点点</figcaption>
        <img  alt="Was beinhaltet das bedingte Vue-Rendering?" >
    </figure>
</template>

<!-- template -->
<div>
    <div>显示A区域</div>
    <div>显示B区域</div>
    <div>显示C区域</div>
</div>

// JavaScript
var app = new Vue({
    el: '#app',
    data: {
        type: "B"
    }
})

<!-- Template -->
<div>
    <h1>欢迎来到W3cplus！(^_^)</h1>
    <h1>请先登录，再来！(^_^)</h1>
</div>

// JavaScript
var app = new Vue({
    el: '#app',
    data: {
        isLogined: true
    }
})

<template>
    <figure>
        <figcaption>恭喜你中了5元红包</figcaption>
        <img  alt="Was beinhaltet das bedingte Vue-Rendering?" >
    </figure>
</template>

<template>
    <figure>
        <figcaption>亲，就差那么一点点</figcaption>
        <img  alt="Was beinhaltet das bedingte Vue-Rendering?" >
    </figure>
</template>

<!-- template -->
<div>
    <div>显示A区域</div>
    <div>显示B区域</div>
    <div>显示C区域</div>
</div>

// JavaScript
var app = new Vue({
    el: '#app',
    data: {
        type: "B"
    }
})

<!-- Template -->
<div>
    <h1>我是一个标题</h1>
    <p>我是一个段落</p>
</div>

// JavaScript
var app = new Vue({
    el: '#app',
    data: {
        isShow: false
    }
})

Das obige ist der detaillierte Inhalt vonWas beinhaltet das bedingte Vue-Rendering?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!