Heim > Web-Frontend > js-Tutorial > Hauptteil

Vue.js-Lerndatensatz: Verwendung der v-if-Direktive in Elementen und Vorlagen

陈政宽~
Freigeben: 2017-06-28 15:37:46
Original
1297 Leute haben es durchsucht

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"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title></title>
 <script src="https://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>
Nach dem Login kopieren


true bedeutet den Ein-Zustand, false bedeutet den Aus-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!

Zusammenfassung

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage