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:391074Durchsuche
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
<!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
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!