suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der Verwendung der v-if-Direktive in Elementen und Vorlagen

Detaillierte Erläuterung der Verwendung der v-if-Direktive in Elementen und Vorlagen

零下一度
零下一度Original
2017-06-29 15:48:513473Durchsuche

Dieser Artikel führt Sie hauptsächlich in die relevanten Informationen zur Verwendung von V-IF-Anweisungen in Elementen und Vorlagen in Vue.js-Lerndatensätzen ein. Ich glaube, dass es einige davon gibt Für Referenz-Lernwerte können Freunde, die es benötigen, einen Blick unten werfen.

Dieser Artikel führt Sie hauptsächlich in die Verwendung von V-IF-Anweisungen in Elementen und Vorlagen von Vue.js ein. Er dient als Referenz und zum Studium:

Die Syntax ist relativ einfach, geben Sie einfach den Code ein: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title></title>
 <script src="cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<p id="wangtuizhijiademo">
 <p v-if="instruction">在Vue.js中，当判断语句为true,可以显示信息，当为false时候不显示</p>
 <template v-if="show1">
  <p>我是 show1，默认是开启的（true），当你设置false我不显示！</p>
 </template>
 <template v-if="show2">
  <p>我是 show2，默认是关闭的，当你设置show2的值为true，我会被显示！</p>
 </template>
</p>

<script>
 new Vue({
  el: &#39;#wangtuizhijiademo&#39;,
  data: {
   instruction:true,
   show1: true,
   show2: false
  }
 })
</script>
</body>
</html>

true bedeutet den Ein-Zustand , false bedeutet den Aus-Zustand Zustand.

Wenn Sie interessiert sind, können Sie versuchen, show2: false von false in true zu ändern. Sie sehen zwei Meldungen wie folgt:

Wenn die Urteilsaussage in Vue.js wahr ist, können sie angezeigt werden. Wenn sie falsch ist, wird sie nicht angezeigt.

Ich bin show1, was standardmäßig aktiviert ist. . Wenn Sie „false“ festlegen, wird es nicht angezeigt!

Ich bin show2, was standardmäßig deaktiviert ist. Wenn Sie den Wert von show2 auf true setzen, werde ich angezeigt!

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung der v-if-Direktive in Elementen und Vorlagen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Zusammenfassung der Beispiele für Event-Handler von vue.jsNächster Artikel：Zusammenfassung der Beispiele für Event-Handler von vue.js

In Verbindung stehende Artikel

Mehr sehen