vue事件修饰符

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script src="js/vue.js"> </script>

<style>

.inner{

height:100px;

background:green;

}

</style>

</head>

<body>

<div id='app' class="inner">

<div @click='divclick'>

<!-- 事件修饰符之取消冒泡 -->

<input type='button' value='点击' @click.stop='btnclick'>

<!-- 事件修饰符之只执行一次事件  <input type='button' value='点击' @click.once='btnclick'>-->

</div>

</div>

<script>

  var vm=new Vue({

el:'#app',

data:{},

methods:{

divclick(){

console.log('div');

},

btnclick(){

console.log('btn');

}

}

})

</script>

</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容