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

Detaillierte Erläuterung der V-Bind- und V-On-Anwendungsfälle in vue.js

php中世界最好的语言

Freigeben： 2018-06-01 11:42:27

Original

1829 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Anwendungsfälle von v-bind und v-on in vue.js ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Verwendung von v-bind und v-on in vue? .js. Hier sehen wir uns praktische Fälle an.

<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, die Abkürzung für v-on

Beim Erstellen einer Single-Page-Anwendung (SPA) verwaltet Vue.js alle Vorlagen, und das Präfix v- ist derzeit 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:

Eine Zusammenfassung der Methode zur Verwendung von JS zur Bestimmung des in einer Zeichenfolge enthaltenen Inhalts

Wie React verwenden, um einen Container für Vue Component + Display Component einzuführen

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