suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der V-Bind- und V-On-Anwendungsfälle in vue.js

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

php中世界最好的语言
php中世界最好的语言Original
2018-06-01 11:42:271818Durchsuche

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>

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>

v-on-Abkürzung: 

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

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!

Stellungnahme：
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
Vorheriger Artikel：Detaillierte Anweisungen zur Verwendung von Axios zur Lösung von HTTP-Anforderungsproblemen in vue2 (ausführliches Tutorial)Nächster Artikel：Detaillierte Anweisungen zur Verwendung von Axios zur Lösung von HTTP-Anforderungsproblemen in vue2 (ausführliches Tutorial)

In Verbindung stehende Artikel

Mehr sehen