1. 按钮点击不传参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件的基本使用</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>welcome to {
{name}}</h2>
<!-- 当click时，执行showInfo函数 -->
<!-- <button v-on:click="showInfo">提示</button> -->
<button @click="showInfo">提示</button>
</div>
<script>
new Vue({
el: "#root",
data: {
name: "xxx"
},
methods: {
showInfo() {
alert("您好")
}
},
})
</script>
</body>
</html>2. 按钮点击传参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件的基本使用</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>welcome to {
{name}}</h2>
<!-- 当click时，执行showInfo函数 -->
<!-- <button v-on:click="showInfo">提示</button> -->
<button @click="showInfo('test')">提示</button>
</div>
<script>
new Vue({
el: "#root",
data: {
name: "xxx"
},
methods: {
showInfo(str) {
alert(str)
}
},
})
</script>
</body>
</html>