This time I will bring you a detailed explanation of the use cases of v-bind and v-on. What are the precautions for using v-bind and v-on? The following is a practical case, let's take a look.
The v-bind directive is used to update HTML responsively. The characteristic form is: v-bind:href , abbreviated as :href;v-on directive is used to monitor DOMeventsForm such as: v-on:click abbreviated as @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>
v- bind, 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>
v-on abbreviation:
<!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a>
JS HTML5 to create mouse-bound particle flow animation
vuex localstorage dynamic monitoring storage steps detailed explanation
The above is the detailed content of Detailed explanation of v-bind and v-on use cases. For more information, please follow other related articles on the PHP Chinese website!