指令修饰符：就是通过 “.” 指明一些指令后缀，不同的后缀封装了不同的处理惩罚操纵 —> 简化代码
一、按键修饰符
- 按键修饰符
@keyup.enter —>当点击enter键的时候才触发
- v-model修饰符
v-model.trim —>去除首尾空格
v-model.number —>转数字
- 变乱修饰符
@变乱名.stop —>阻止冒泡
@变乱名.prevent —>阻止默认行为
代码演示：
- <body>
- <div id="app">
- <h3>@keyup.enter → 监听键盘回车事件</h3>
- <!-- -->
- <input @keyup.enter="fn" v-model="username" type="text">
- </div>
- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
- <script>
- const app = new Vue({
- el: '#app',
- data: {
- username: ''
- },
- methods: {
- fn (e) {
- // if (e.key === 'Enter') {
- // console.log('键盘回车的时候触发', this.username)
- // }
- console.log('键盘回车的时候触发', this.username)
- }
- }
- })
- </script>
- </body>
二、v-model修饰符
- v-model.trim —>去除首位空格
- v-model.number —>转数字
如果遇到转不了数字的，如abc，它就会留在原地，此时需要自行判断，但如果是汉字，就会截取汉字之前的数字，无论怎么样它都不会产生NaN
- <body>
- <div id="app">
- <h3>v-model修饰符 .trim .number</h3>
- 姓名：<input v-model.trim="username" type="text"><br>
- 年纪：<input v-model.number="age" type="text"><br>
- <script src="./vue.js"></script>
- <script>
- const app = new Vue({
- el: '#app',
- data: {
- username: '',
- age: '',
- })
- </script>
- </body>
三、变乱修饰符
- @变乱名.stop —> 阻止冒泡
- @变乱名.prevent —>阻止默认行为
- @变乱名.stop.prevent —>可以连用 即阻止变乱冒泡也阻止默认行为
- <body>
- <div id="app">
- <h3>@事件名.stop → 阻止冒泡</h3>
- <div @click="fatherFn" class="father">
- <div @click.stop="sonFn" class="son">儿子</div>
- </div>
- <h3>@事件名.prevent → 阻止默认行为</h3>
- <a @click.prevent href="http://www.baidu.com">阻止默认行为</a>
- </div>
- <script src="./vue.js"></script>
- <script>
- const app = new Vue({
- el: '#app',
- data: {
- },
- methods: {
- fatherFn() {
- alert('老父亲被点击了')
- },
- sonFn() {
- alert('儿子被点击了')
- }
- }
- })
- </script>
- </body>
|
