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

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

陈政宽～

Freigeben： 2017-06-28 15:37:46

Original

1228 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!