马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有账号?立即注册
x
指令修饰符:就是通过 “.” 指明一些指令后缀,不同的后缀封装了不同的处理惩罚操纵 —> 简化代码
一、按键修饰符
- 按键修饰符
@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>
复制代码 免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。 |