vue.js學習筆記之v-bind,v-on

本文轉載自查看原文 2016-02-25 15:08 46615 vue/ v-bind v-on

v-bind 指令用於響應地更新 HTML 特性形式如：v-bind:href 縮寫為 :href;

v-on 指令用於監聽DOM事件形式如：v-on:click 縮寫為 @click;

 1 <body>
 2   <div id="test">
 3     <img v-bind:src="src">
 4     <a v-bind:href="url">百度一下</a>
 5     <a :href="url">百度一下</a>
 6     <a href="{{url}}">百度一下</a>
 7     <a v-on:click="update()" href="#">更改圖片</a>
 8     <a @click="update()" href="#">更改圖片</a>
 9   </div>
10   <script type="text/javascript">
11     new Vue({
12       el: '#test',
13       data: {
14         url: "https://www.baidu.com",
15         src: "img/spring.jpg"16 17 18       },
19       methods: {
20         update: function(){
21           this.src = "img/summer.jpg";
22         }
23       }
24     })
25   </script>
26 </body>

note: vue.js 1.0版本后才有的這兩個指令

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue.js（3）--v-bind與v-on Vue學習筆記三：v-bind，v-on的使用學習：vue中v-on和v-bind vue.js的v-bind Vue：v-bind/v-on的縮寫 vue v-bind v-on v-bind和v-on vue v-for v-on v-bind的結合使用 [Vue]Vue語法糖v-bind、v-on vue中v-on和v-bind的區別