博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【vue】指令修饰符,键盘事件,阻止默认事件,阻止事件传播
阅读量:6595 次
发布时间:2019-06-24

本文共 1606 字,大约阅读时间需要 5 分钟。

<style>
#box1
{
width
:
100px
;
height
:
100px
;
background-color
:
blue
;
}
#box2
{
width
:
50px
;
height
:
50px
;
background-color
:
red
;
}
<
/style>
</head>
<body>
<div
id
=
"app"
>
  • 语法
<!-- vue的某些指令 可以使用指令修饰符,从而实现不同的指令效果 -->
<!-- 格式:指令.修饰符1.修饰符2 -->
  • number类型
<!--v-model指令的 .number修饰符用于设置绑定的数据为number类型 -->
<input
type
=
"text"
v-model
.
number
=
"num"
>
<p>
{
{num+1}}
</p>
<br>
  • 失去焦点时才同步
<!--v-model指令的 .lazy修饰符,用于设置绑定在blur事件中而不是默认的input事件。 -->
<input
type
=
"text"
v-model
.
lazy
=
"d1"
>
<p>
{
{d1}}
</p>
<hr>
<br>
<br>
  • 去除空格
<!--v-model指令的 .trim修饰符,用于将输入框中的内容trim(去除两端空格)之后再绑定-->
<input
type
=
"text"
v-model
.
trim
=
"d2"
>
<pre>
<span
style
=
"background-color:rgb(173, 119, 119)"
>
{
{d2}}
</span>
</pre>
<p
style
=
"background-color:rgb(173, 119, 119)"
>
{
{d2}}
</p>
  • 键盘事件
<!-- v-on指令监听的键盘事件,可以使用键名或者keycode作为修饰符,那么仅当这个键被按下才会触发事件 -->
<!-- <input type="text" v-model="d3" @keypress.13="keypress"> -->
<input
type
=
"text"
v-model
=
"d3"
@
keypress
.
enter
=
"keypress"
>
<hr>
  • 阻止默认行为
<!-- v-on 指令的.prevent 修饰符,用于阻止事件的默认行为-->
  • 阻止事件传播
<!-- .stop修饰符,阻止事件的迹象传播。 -->
<a
href
=
""
@
click
.
prevent
=
""
>
这是一个按钮
</a>
<hr>
<div
id
=
"box1"
@
click
.
self
=
"blueClick"
>
<div
id
=
"box2"
@
click
.
stop
=
"redClick"
>
<!-- <div id="box2" @click.stop="redClick"> -->
不会向下传播
</div>
</div>
</div>
<script
src
=
"vue.js"
>
<
/script>
<script>
new
Vue
({
el:
"#app"
,
data:
{
num:
0
,
d1:
100
,
d2:
""
,
d3:
""
,
},
methods:
{
keypress
(
e
){
console
.
log
(
e
.
keyCode
)
alert
(
this
.
d3
)
},
blueClick
(
e
){
console
.
log
(
"蓝色点击了"
)
},
redClick
(
e
){
console
.
log
(
"红色点击了"
)
}
}
})
<
/script>
</body>

转载地址:http://ggcio.baihongyu.com/

你可能感兴趣的文章
mybatis报ORA-00911: 无效字符
查看>>
Swift UIView动画animateWithDuration
查看>>
Maven 集成Tomcat插件
查看>>
css中的line-height问题
查看>>
我的友情链接
查看>>
Linux运维学习笔记之二:常用命令1
查看>>
snort安装常见问题及解决方法
查看>>
在ubuntu系统安装jdk
查看>>
很久没写了
查看>>
我的友情链接
查看>>
Cacti部署SOP
查看>>
Extjs - Panel组件
查看>>
收集参数及反转过程
查看>>
PPTP××× 数据分流
查看>>
mongodb 索引
查看>>
Citrix 宣布 XenServer 全面开源
查看>>
我的友情链接
查看>>
oracle 如果为空则输出0
查看>>
Spfa(最短路求解)
查看>>
使用linux-c编程实现简单的ls命令
查看>>