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