Vue.js 方法与事件
2019-08-06 本文已影响0人
Rinaloving
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>方法与事件</title>
</head>
<body>
<!--自动识别最新稳定版本的Vue.js-->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<div id="app">
点击次数：{{ counter}}
<button @click="counter++">+ 1</button>
</div>
<div id="app2">
点击次数：{{ num }}
<button @click="handleAdd()"> + 1 </button>
<button @click="handleAdd(10)"> + 10 </button>
</div>
<!--$event 用于访问原生DOM事件，例如下面的实例可以阻止链接打开-->
<div id="app3">
<a href="https://www.baidu.com" @click="handleClick('禁止打开',$event)">
打开链接
</a>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
counter:0
}
})
</script>
<script>
var app = new Vue({
el:'#app2',
data:{
num:0
},
methods:{
handleAdd: function(count){
count = count || 1;
// this 指向当前 Vue 实例 app
this.num += count;
}
}
})
</script>
<script>
var app = new Vue({
el:'#app3',
methods:{
handleClick:function(message,event){
event.preventDefault();
window.alert(message)
}
}
})
</script>
</body>
</html>
方法与事件.png
