Heim > Artikel > Web-Frontend > Einfaches Verständnis von Vue Conditional Rendering_vue.js

Einfaches Verständnis von Vue Conditional Rendering_vue.js

不言Original: 2018-03-31 17:04:391109Durchsuche

Dieser Artikel hilft vor allem jedem, einfach zu verstehen, was Vue-bedingtes Rendering ist. Interessierte Freunde können sich darauf beziehen. 1. v-if Element

Beachten Sie, dass else nur auf v-if oder v-show folgen kann

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Vue条件渲染</title>
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 <p class="test">
 <p v-if="isDisplay"> <!--if...else... 单个元素-->
 显示我1
 </p>
 <p v-else>
 显示我2
 </p>
 </p>
 <script type="text/javascript">
 var myVue =new Vue({
 el: ".test",
 data: {
  isDisplay: 1
 }
 })
 </script>
 </body>
</html>

Das Ausgabeergebnis ist: show me 1

2. v-if zeigt mehrere Elemente an und muss mit d477f9ce7bf77f53fbcf36bec1b69b7a abgeglichen werden

Beachten Sie das andere Nur gefolgt von v-if oder v-show

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Vue条件渲染</title>
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 <p class="test">
 <template v-if="isDisplay"> <!--if...else... 用template实现多个元素-->
 <p>显示我1</p>
 <p>显示我11</p>
 <p>显示我12</p>
 <p>显示我13</p>
 </template>
 <p v-else>
 显示我2
 </p>
 </p>
 <script type="text/javascript">
 var myVue =new Vue({
 el: ".test",
 data: {
  isDisplay: 1
 }
 })
 </script>
 </body>
</html>

Ausgabeergebnis: zeige mir 1, zeige mir 11, zeige mir 12, zeige mir 13

3. v-show unterstützt nur die Anzeige einzelner Elemente und unterstützt nicht mehrere in d477f9ce7bf77f53fbcf36bec1b69b7a enthaltene Elemente. Beachten Sie, dass else nur gefolgt werden kann v-if oder v -show nach

4. Der Unterschied zwischen v-if und v-show

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Vue条件渲染</title>
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 <p class="test">
 <p v-show="isDisplay"> <!--if...else... 单个元素,注意注意 v-show 不支持 <template> 语法-->
 显示我1
 </p>
 <p v-else>
 显示我2
 </p>
 </p>
 <script type="text/javascript">
 var myVue =new Vue({
 el: ".test",
 data: {
  isDisplay: 1
 }
 })
 </script>
 </body>
</html>

(1) v-if ist echtes Rendern und Entladen, aber nach dem ersten Rendern wird das Ergebnis zwischengespeichert

(2) Das v-show-Element wird immer kompiliert und beibehalten, aber basiert einfach auf CSS-Switching
(3) Zusammenfassung: Wenn Sie v-show häufig wechseln müssen, ist es besser, wenn sich die Bedingungen während der Laufzeit wahrscheinlich nicht ändern

GitHub-Adresse: https://github .com/lily1010/vue_learn/tree/master/lesson08

Verwandte Empfehlungen:

Einfaches Verständnis des bedingten Renderings von Vue

Das obige ist der detaillierte Inhalt vonEinfaches Verständnis von Vue Conditional Rendering_vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css if JS github https

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So bedienen Sie das js-Array, um Duplikate zu entfernenNächster Artikel：So bedienen Sie das js-Array, um Duplikate zu entfernen

In Verbindung stehende Artikel

Mehr sehen