ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【Vue】指令修饰符 [打印本页]
作者: 何小豆儿在此    时间: 2024-6-21 13:14
标题: 【Vue】指令修饰符
指令修饰符：就是通过 “.” 指明一些指令后缀，不同的后缀封装了不同的处理惩罚操纵 —> 简化代码
一、按键修饰符


代码演示：
  1. <body>
  2.   <div id="app">
  3.     <h3>@keyup.enter  →  监听键盘回车事件</h3>
  4.     <!-- -->
  5.     <input @keyup.enter="fn" v-model="username" type="text">
  6.   </div>
  7.   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  8.   <script>
  9.     const app = new Vue({
  10.       el: '#app',
  11.       data: {
  12.         username: ''
  13.       },
  14.       methods: {
  15.         fn (e) {
  16.           // if (e.key === 'Enter') {
  17.           //   console.log('键盘回车的时候触发', this.username)
  18.           // }
  20.           console.log('键盘回车的时候触发', this.username)
  21.         }
  22.       }
  23.     })
  24.   </script>
  25. </body>
复制代码
二、v-model修饰符


  1. <body>
  2.   <div id="app">
  3.     <h3>v-model修饰符 .trim .number</h3>
  4.     姓名：<input v-model.trim="username" type="text"><br>
  5.     年纪：<input v-model.number="age" type="text"><br>
  6.   <script src="./vue.js"></script>
  7.   <script>
  8.     const app = new Vue({
  9.       el: '#app',
  10.       data: {
  11.         username: '',
  12.         age: '',
  13.       })
  14.   </script>
  15. </body>
复制代码
三、变乱修饰符


  1. <body>
  2.   <div id="app">
  3.     <h3>@事件名.stop → 阻止冒泡</h3>
  4.     <div @click="fatherFn" class="father">
  5.       <div @click.stop="sonFn" class="son">儿子</div>
  6.     </div>
  8.     <h3>@事件名.prevent → 阻止默认行为</h3>
  9.     <a @click.prevent href="http://www.baidu.com">阻止默认行为</a>
  10.   </div>
  11.   <script src="./vue.js"></script>
  12.   <script>
  13.     const app = new Vue({
  14.       el: '#app',
  15.       data: {
  16.       },
  17.       methods: {
  18.         fatherFn() {
  19.           alert('老父亲被点击了')
  20.         },
  21.         sonFn() {
  22.           alert('儿子被点击了')
  23.         }
  24.       }
  25.     })
  26.   </script>
  27. </body>
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4