Vue指令修饰符

最新推荐文章于 2024-07-11 18:02:52 发布

ayo只若初见

最新推荐文章于 2024-07-11 18:02:52 发布

阅读量365

点赞数 5

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/cyqwersj/article/details/138083328

版权

指令修饰符：通过'.'指明一些指令后缀，不同后缀封装了不同的处理操作

@keyup.enter：一般情况下，@keyup表示键盘弹起，默认情况下按任意键都会触发事件，但是加了.enter，只会在按回车键触发监听，相当于简便了代码

类似地，

- v-model.trim —>去除首位空格

- v-model.number —>转数字

- @事件名.stop —> 阻止冒泡

- @事件名.prevent —>阻止默认行为

- @事件名.stop.prevent —>可以连用即阻止事件冒泡也阻止默认行为

接下来我将以@keyup.enter做演示，以我们之前用的v-model的指令为例

试作修改，在账户里面的标签添加了@keyup.enter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        账户:<input type="text" v-model="username" @keyup.enter="reset"><br><br>
        <button @click="reset">更改</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                username:'3'
            },
            methods:{
                reset(){
                    this.username='5';
                }
            }
        })
    </script>
</body>
</html>

我首先把username的值定为了3，运行下来就是这样

当我们点击账户右边的方框或者下面的更改按钮时就会变成5，那是因为我们用的是同一个方法名。

上面这张图为执行之后的效果。

其实不光是enter，@keyup的后面可以加任意键，比如把第十行换成

账户:<input type="text" v-model.number="username" @keyup.a="reset"><br><br>

再次运行，当在文本框中输入a,文本框内就会立即变成5，但是用的最多的还是@keyup.enter。

接下来再演示以下v-model.number

还是上面的源代码，我们先在文本框里输入123，按F12调试

调试里面的数字变蓝，说明已经成为数字了

当我们输完数字并尝试输入其他字母时，发现并不会识别字母，比如输入123aaa，调试后显示的还是123

最后我们试试@事件名.stop的用法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin-top: 20px;
    }
    .son {
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div id="app">
    <h3>@事件名.stop     →  阻止冒泡</h3>
    <div @click="fatherFn" class="father">
      <div @click.stop="sonFn" class="son">儿子</div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        age: '',
      },
      methods: {
        fatherFn () {
          alert('老父亲被点击了')
        },
        sonFn (e) {
          // e.stopPropagation()
          alert('儿子被点击了')
        }
      }
    })
  </script>
</body>
</html>

我们运行代码，会出现一个正方形，当我们不使用@click.stop当点击粉色方块时，会出现‘儿子被点击了’和‘老父亲被点击了’的弹窗，这就是冒泡，当我们使用@click.stop时，就不会发生冒泡反应，即只弹出‘儿子被点击了’的弹窗。可以自己动手实践一下

ayo只若初见

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Vue指令修饰符

我们运行代码，会出现一个正方形，当我们不使用@click.stop当点击粉色方块时，会出现‘儿子被点击了’和‘老父亲被点击了’的弹窗，这就是冒泡，当我们使用@click.stop时，就不会发生冒泡反应，即只弹出‘儿子被点击了’的弹窗。：一般情况下，@keyup表示键盘弹起，默认情况下按任意键都会触发事件，但是加了.enter，只会在按回车键触发监听，相当于简便了代码。再次运行，当在文本框中输入a,文本框内就会立即变成5，但是用的最多的还是@keyup.enter。调试里面的数字变蓝，说明已经成为数字了。
复制链接

扫一扫