Maison > Article > interface Web > Explication détaillée des cas d'utilisation de v-bind et v-on dans vue.js

Explication détaillée des cas d'utilisation de v-bind et v-on dans vue.js

php中世界最好的语言original: 2018-06-01 11:42:271797parcourir

Cette fois, je vais vous apporter une explication détaillée des cas d'utilisation de v-bind et v-on dans vue.js Quelles sont les précautions pour utiliser v-bind et v-on dans vue. .js. Voici quelques cas pratiques.

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

note : Ces deux instructions ne sont disponibles qu'après vue.js version 1.0

v-bind, l'abréviation de v-on

Lors de la création d'une application monopage (SPA), Vue.js gérera tous les modèles, et le préfixe v- n'est pas si important pour le moment. Par conséquent, Vue.js fournit des abréviations spéciales pour les deux instructions les plus couramment utilisées, v-bind et v-on :

Ce qui suit est l'abréviation de 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>

Abréviation v-on :

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres informations connexes. articles sur le site PHP chinois !

Lecture recommandée :

Un résumé de la méthode d'utilisation de JS pour déterminer le contenu contenu dans une chaîne

Comment utiliser React pour introduire un conteneur pour Vue Component + Display Component

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Instructions détaillées sur l'utilisation d'axios pour résoudre les problèmes de requête http dans vue2 (tutoriel détaillé)Article suivant：Instructions détaillées sur l'utilisation d'axios pour résoudre les problèmes de requête http dans vue2 (tutoriel détaillé)

Articles Liés

Voir plus