Vue – 在標籤中，綁定參數 (v-bind) 與監聽事件 (v-on) 的混和用法
HTML
- v-bind 綁定參數 “href” 為變數 url，等於下面的 app.url
- v-on 監聽事件 “click” 為方法 show()，等於 app.show()
|
1 2 3 4 5 6 7 |
<div class="app"> <a v-bind:href="url" v-on:click="show">前往指定網址</a> <br> <a href="http://yahoo.com.tw" onclick="return false">點我會被終止行動</a> </div> |
JS
因為 vue 特性
- app.url 等同於 http://google.com
- app.show() 呼叫 vue 底下 methods 的 show()
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var app = new Vue({ el: '.app', data: { url: 'http://google.com' }, methods: { show: function (){ alert('Hello World'); return false; } } }) |
「前往指定網址」點擊後會先出現 “Hello World” 後才前往 Google 網址。有趣的是，show() 回傳的 false，並不會讓 href 前往 Google 終止行動。這跟 JavaScript on 事件是不同的，可以看「點我會被終止超行動」就會發現並不能如期地前往指定網址。
Comments