Detaillierte Erläuterung der Anwendungsfälle von V-Bind und V-On-js-Tutorial-php.cn

Detaillierte Erläuterung der Anwendungsfälle von V-Bind und V-On

php中世界最好的语言

Freigeben： 2018-05-14 13:52:12

Original

2516 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Anwendungsfälle von v-bind und v-on ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung von v-bind und v-on? Fall, werfen wir einen Blick darauf.

v-bind-Direktive wird verwendet, um HTML-Funktionen reaktionsfähig zu aktualisieren. Die Form ist: v-bind:href, abgekürzt als :href;

v-on-Direktive wird zur Überwachung verwendet DOM Ereignisse Zum Beispiel: v-on:click abgekürzt als @click;

<body>
 <p id="test">
  <img v-bind:src="src">
  <a v-bind:href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >百度一下</a>
  <a :href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >百度一下</a>
  <a href="{{url}}" rel="external nofollow" >百度一下</a>
  <a v-on:click="update()" href="#" rel="external nofollow" rel="external nofollow" >更改图片</a>
  <a @click="update()" href="#" rel="external nofollow" rel="external nofollow" >更改图片</a>
 </p>
 <script type="text/javascript">
  new Vue({
   el: '#test',
   data: {
    url: "https://www.baidu.com",
    src: "img/spring.jpg"16 17 18    },
   methods: {
    update: function(){
     this.src = "img/summer.jpg";
    }
   }
  })
 </script>
</body>

Nach dem Login kopieren

Hinweis: Diese beiden Anweisungen sind erst nach vue.js Version 1.0 verfügbar

v- bind, Abkürzung für v-on

Beim Erstellen einer Single Page Application (SPA) verwaltet Vue.js alle Vorlagen und das v- Präfix lautet zu diesem Zeitpunkt nicht so wichtig. Daher stellt Vue.js spezielle Abkürzungen für die beiden am häufigsten verwendeten Anweisungen v-bind und v-on zur Verfügung:

Das Folgende ist die Abkürzung von v-bind:

<!-- 完整语法 --> 
<a v-bind:href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
<!-- 缩写 --> 
<a :href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
<!-- 完整语法 --> 
<button v-bind:disabled="someDynamicCondition">Button</button> 
<!-- 缩写 --> 
<button :disabled="someDynamicCondition">Button</button>

Nach dem Login kopieren

v-on-Abkürzung:

<!-- 完整语法 --> 
<a v-on:click="doSomething"></a> 
<!-- 缩写 --> 
<a @click="doSomething"></a>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum Thema PHP Chinesische Website!

Empfohlene Lektüre:

JS+HTML5 zum Erstellen mausgebundener Partikelflussanimationen

vuex+localstorage überwacht den Speicher dynamisch Detaillierte Erklärung der Schritte

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Anwendungsfälle von V-Bind und V-On. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!