Explication détaillée des cas d'utilisation de v-bind et v-on-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-05-14 13:52:12

original

2514 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

Abréviation v-on :

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

Copier après la connexion

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!