Detailed explanation of v-bind and v-on use cases in vue.js-JS Tutorial-php.cn

Detailed explanation of v-bind and v-on use cases in vue.js

php中世界最好的语言

Release： 2018-06-01 11:42:27

Original

1803 people have browsed it

This time I will bring you a detailed explanation of the use cases of v-bind and v-on in vue.js. What are the precautions for using v-bind and v-on in vue.js? The following are Let’s take a look at practical cases.

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

Copy after login

note: These two instructions are only available after vue.js version 1.0

v-bind, the abbreviation of v-on

When building a single-page application (SPA), Vue.js will manage all templates, and the v- prefix is not so important at this time. Therefore, Vue.js provides special abbreviations for the two most commonly used instructions v-bind and v-on:

Let me introduce the abbreviation of v-bind to you:

<!-- 完整语法 --> 
<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>

Copy after login

v-on abbreviation:

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

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!