Vue.js 事件绑定示例：点击、鼠标移入、鼠标移出
<!DOCTYPE html>
<html lang='zh-CN'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=0'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<title>Vue.js 事件绑定示例：点击、鼠标移入、鼠标移出</title>
<!-- 导包 -->
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
</head>
<body>
<!-- HTML结构 -->
<div id='app'>
<button v-on:click='doClick'>点我</button>
<button v-on:mouseenter='doEnter'>鼠标移入</button>
<button v-on:mouseleave='doLeave'>鼠标移出</button>
</div>
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
name: '智哥'
},
//methods:注册事件的方法名
methods: {
doClick() {
alert('我被点击了')
},
doEnter() {
console.log('鼠标移入我了')
},
doLeave() {
console.log('鼠标移出我了')
}
},
})
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/ndOs 著作权归作者所有。请勿转载和采集!