vue.js中修饰符.stop的用法。

.stop修饰符是用来阻止冒泡事件的发生的。

用法如下：

<a v-on:click.stop="doThis"></a>

下面是全部的代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="vue.js"></script>
</head>
<style>#gpa {margin: 0 auto;width: 100px;height: 60px;background: green;}#pa {width: 60px;height: 40px;background: pink;margin: 0 auto;text-align: center}
</style>
<body>
//--------------------------------重点是这一部分代码。
<div id="gpa" v-on:click="dodo"><div id="pa" v-on:click="doThat"><a  v-on:click.stop="doThis" href="http://www.baidu.com">百度</a>//点击百度的时候不发生冒泡，执行doThis函数，然后跳转到百度首页。</div>//点击粉色部分，即pa部分，发生冒泡，执行doThat，dodo函数。
</div>
</body>
<script>var gpas = new Vue({el:'#gpa',data:{},methods:{doThis:function(){alert("doThis");},doThat:function (){alert("doThat")},dodo:function(){alert("dodo")}}})</script>
</html>

修饰符.stop应该放在需要阻止冒泡的位置上。

vue.js中修饰符.stop的用法。相关推荐

vue的lazy修饰符和number修饰符、表单结构
目录 vue的lazy修饰符 vue的number修饰符表单的构成表单域表单控件 vue的lazy修饰符在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 ...
php动态写入vue,Vue.js中使用动态组件的方法
本文介绍了如何在Vue.js中引用组件中的HTML元素.您可以通过使用Vue路由器或创建动态组件来切换视图或组件模板. Vue路由器用于在DOM中的视图或组件模板之间导航.要使用Vue路由器,请在ro ...
Vue.js 中的渲染函数是什么？如何使用渲染函数？
Vue.js 中的渲染函数是什么?如何使用渲染函数? Vue.js 是一款流行的前端框架,它提供了许多方便的工具和 API,用于构建交互式的用户界面.其中,渲染函数是 Vue.js 中一个强大的工具, ...
echarts怎么用在php,在Vue.JS中怎样使用echarts
这次给大家带来在Vue.JS中怎样使用echarts,在Vue.JS中使用echarts的注意事项有哪些,下面就是实战案例,一起来看一下. 上篇文章给大家介绍了在 webpack 中使用 EChar ...
js中!和!!的区别及用法
js中!和!!的区别及用法 js中!的用法是比较灵活的,它除了做逻辑运算常常会用!做类型判断,可以用!与上对象来求得一个布尔值, 1.!可将变量转换成boolean类型,null.undefined和 ...
js中继承的几种用法总结(apply,call,prototype)
本篇文章主要介绍了js中继承的几种用法总结(apply,call,prototype) 需要的朋友可以过来参考下,希望对大家有所帮助一,js中对象继承 js中有三种继承方式 1.js原型(proto ...
Vue.js中的MVVM
MVVM的理解 MVVM拆开来即为Model-View-ViewModel,有View,ViewModel,Model三部分组成.View层代表的是视图.模版,负责将数据模型转化为UI展现出来.Mod ...
vue.js中mock本地json数据
vue.js中mock本地json数据新版本的vue项目中已经将dev-server.js,dev-client.js两个js文件合并到了webpack.dev.conf.js文件中,以下分别是新旧 ...
VUE.js 中取得后台原生HTML字符串原样显示问题
今天使用vue调试页面,发现了页面上的一个问题,后台数据传过来的HTML字符串并没有被转换为正常的HTML代码,一拍脑门,发现忘记转换了,于是满心欢喜加上了{{{}}}.但是之后构建发现报错: 为此去 ...
[vue] vue常用的修饰符有哪些？列举并说明
[vue] vue常用的修饰符有哪些?列举并说明 .trim .number .stop .prevent 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起 ...

vue.js中修饰符.stop的用法。

.stop修饰符是用来阻止冒泡事件的发生的。

vue.js中修饰符.stop的用法。相关推荐

最新文章

热门文章