Zusammenfassung allgemeiner Anweisungen in Vue.js (v-if, v-for usw.)

Manchmal können zu viele Anweisungen zu Problemen mit falschem Erinnern oder Verwirrung führen. Daher werden in diesem Artikel beim Auswendiglernen Zwischenspeicher und Querverweise verwendet, um die Wahrscheinlichkeit von Fehlern zu verringern.

In diesem Artikel geht es hauptsächlich um sechs Anweisungen:

v-if//v-show//v-else//v-for//v-bind//v-on

1. Die bedingte Rendering-Anweisung v-if bestimmt, ob das Element basierend auf dem Bool-Wert des nachfolgenden Ausdrucks gerendert werden soll.

HTML:

<p id="example01">
 <p v-if="male">Male</p>
 <p v-if="female">Female</p>
 <p v-if="age>25">Age:{{age}}</p>
 <p v-if="name.indexOf(&#39;lin&#39;)>0">Name:{{name}}</p>
</p>

JS:

var vm= new Vue({
 el:"#example01",
 data:{
  male:true,
  female: false,
  age:29,
  name:'colin'
 }
 })

Seitenrenderingeffekt:

Daher rendert die v-if-Anweisung nur Elemente, deren Ausdruck dahinter wahr ist; die v-show-Anweisung wird hier vorgestellt, da der Unterschied zwischen den beiden darin besteht, dass die v Die Anweisung -show rendert das Element hinter ihm, dessen Ausdruck falsch ist. Der CSS-Code wird zu einem solchen Element hinzugefügt: style="max-width:90%"; Ändern Sie den obigen v-if-Instanzcode in v-show und das Rendern der Seite Wirkung ist:

2, v-show ähnelt v-if, außer dass es Elemente rendert, deren Ausdruck dahinter falsch ist, und CSS-Code zu diesen hinzufügt elements: style="max-width:90%";

3, v-else muss der v-if/v-show-Anweisung folgen, sonst funktioniert es nicht

Wenn der Ausdruck des Die v-if/v-show-Anweisung ist wahr, das else-Element wird nicht angezeigt. Wenn der Ausdruck der v-if/v-show-Anweisung falsch ist, wird das else-Element auf der Seite angezeigt :

<p id="app">
<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-else>Name: {{ name }}</h1>
<hr>
<h1 v-show="name.indexOf(&#39;cool&#39;) = 0">Name: {{ name }}</h1>
<h1 v-else>Sex: {{ sex }}</h1>
</p>

<script>
 var vm = new Vue({
 el: &#39;#app&#39;,
 data: {
  age: 21,
  name: &#39;keepcool&#39;,
  sex: &#39;Male&#39;
 }
 })
</script>

4, v-for ähnelt JS-Traversal, die Verwendung ist v- for="item in items", items ist ein Array, item ist ein Array von Elementen innerhalb eines Arrays.

zB:

CSS:

<style>
table,th,tr,td{
  border:1px solid #ffcccc;
  border-collapse: collapse;
 }
</style>

HTML:

<p id="example03">
 <table>
 <thead>
 <tr>
  <th>Name</th>
  <th>Age</th>
  <th>Sex</th>
 </tr>
 </thead>
 <tbody>
 <tr v-for="person in people">
  <td>{{ person.name }}</td>
  <td>{{ person.age }}</td>
  <td>{{ person.sex }}</td>
 </tr>
 </tbody>
 </table>
</p>

JS:

<script>
 var vm = new Vue({
 el: &#39;#example03&#39;,
 data: {
  people: [{
  name: &#39;Jack&#39;,
  age: 30,
  sex: &#39;Male&#39;
  }, {
  name: &#39;Bill&#39;,
  age: 26,
  sex: &#39;Male&#39;
  }, {
  name: &#39;Tracy&#39;,
  age: 22,
  sex: &#39;Female&#39;
  }, {
  name: &#39;Chris&#39;,
  age: 36,
  sex: &#39;Male&#39;
  }]
 }
 })
</script>

Seiteneffekt:

5, v-bind Dieser Befehl wird verwendet, um HTML-Funktionen responsiv zu aktualisieren, z. B. das Binden eines Klassenelements oder den Stil eines Elements.

Um beispielsweise die aktuelle Seitenzahl in der Paging-Funktion hervorzuheben, können Sie den Bind-Befehl verwenden.

<ul class="pagination">
  <li v-for="n in pageCount">
   <a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? &#39;active&#39; : &#39;&#39;">{
   { n + 1 }}</a>
  </li>
  </ul>

6, v-on wird verwendet, um DOM-Ereignisse bestimmter Elemente zu überwachen, z. B. Klickereignisse.

zB:

Das Obige ist eine Zusammenfassung gängiger Vue.js-Anweisungen (v-if, v-for usw.). Weitere verwandte Inhalte finden Sie hier Achten Sie auf die chinesische PHP-Website (www.php.cn)!

<p id="example04">
 <input type="text" v-model="message">
 <button v-on:click="greet">Greet</button>
 <!-- v-on指令可以缩写为@符号-->
 <button @click="greet">Greet Again</button>
 </p>

<script>
 var exampleData04={
 message:"Nice meeting U"
 };
 var vm2=new Vue({
 el:"#example04",
 data:exampleData04,
 methods:{
  greet:function(){
  alert(this.message);
  }
   
 }
 })
</script>