Vue – 在標籤中,綁定參數 (v-bind) 與監聽事件 (v-on) 的混和用法

HTML

  • v-bind 綁定參數 “href” 為變數 url,等於下面的 app.url
  • v-on 監聽事件 “click” 為方法 show(),等於 app.show()
<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()
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

發表迴響