recherche

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

Explication détaillée des cas d'utilisation de v-bind et v-on

php中世界最好的语言
php中世界最好的语言original
2018-05-14 13:52:122530parcourir

Cette fois, je vais vous apporter une explication détaillée des cas d'utilisation de v-bind et v-on Quelles sont les précautions lors de l'utilisation de v-bind et v-on. Ce qui suit est un exemple pratique. cas, jetons un coup d'oeil.

La directive v-bind est utilisée pour mettre à jour les fonctionnalités HTML de manière réactive. Le formulaire est : v-bind:href , abrégé en :href;

La directive v-on est utilisée pour surveiller. DOM événements Par exemple : v-on:click abrégé en @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>

remarque : 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 v - le préfixe 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 :

JS+HTML5 pour créer une animation de flux de particules liée à la souris

vuex+localstorage surveille dynamiquement le stockage Explication détaillée des étapes

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：Explication détaillée des étapes pour contrôler les autorisations de routage avec React Router4+reduxArticle suivant：Explication détaillée des étapes pour contrôler les autorisations de routage avec React Router4+redux

Articles Liés

Voir plus