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

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

php中世界最好的语言

Libérer： 2018-06-01 11:42:27

original

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

Copier après la connexion

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>

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 :

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!