524 字
2 分钟阅读
Vue – v-on
简介
Vue von
代码演示
<html>
<head>
<title>Vue v-on</title>
</head>
<body>
<div id = "app">
<!-- v-on 绑定事件 -->
<!-- 语法： v-on:事件名 = "方法名" -->
<!-- @事件名 = "方法名" -->
<!-- 作用：为html标签绑定事件（添加事件监听） -->
<button v-on:click = "onclick1">按钮1</button>
<button @click = "onclick2">按钮2</button>
</div>
<script type="module">
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data(){
},
// Vue methods 存放方法
// methods 中的 this 指向 Vue 实例 (data())
methods: {
onclick1(){
console.log('点击了第一个按钮')
},
onclick2(){
console.log('点击了第二个按钮')
}
}
}).mount('#app')
</script>
</body>
</html>效果
