Vue修饰符的使用

Vue修饰符

一些被忽略但很好用的小功能

表单修饰符

1、.lazy

<div>
  <input v-model.lazy="message"/>
  <p>{{message}}</p>
</div>
<script>
data () {
  return {
     message: ''
   }
 }
</script>

message不会实时发生改变，而是在失去焦点或者按回车的时候才会更新

2、.number

<div>
  <input v-model.number="message"/>
  <p>{{message}}</p>
</div>
<script>
data () {
  return {
     message: ''
   }
 }
</script>

正常的v-model，你在输入框中输入数字，message的类型是String;.number可以将输入的数字从String转为Number
BUT（特殊情况）：.number如果先输入数字再输入字符，字符会被无效；如果先输入字符，再输入数字，就相当于没加.number，类型就会变成String

3、.trim
用于自动过滤输入的首尾空格

<div>
  <input v-model.trim="message"/>
  <p>{{message}}</p>
</div>
<script>
data () {
  return {
     message: ''
   }
 }
</script>

事件修饰符

1、.stop

<template>
  <div class="xxx">
    <div class="111" @click="test1">
      <div class="222" @click="test2">
        测试
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods:{
    test1(){
      console.log('test1')
    },
    test2(){
      console.log('test2')
    }
  }
}
</script>

点击后出现

<template>
  <div class="xxx">
    <div class="111" @click="test1">
      <div class="222" @click.stop="test2">
        测试
      </div>
    </div>
  </div>
</template>

点击后出现

2、.prevent
其作用就是阻止组件本来应该发生的事件，转而去执行自己定义的事件

<template>
  <div class="about">
    <a href="https://www.baidu.com" @click="test2">跳转</a>
    <a href="https://www.baidu.com" @click.prevent="test2">跳转</a>
  </div>
</template>

第一个会跳转百度网址，第二个执行test2

3、.capture

<template>
  <div class="xxx">
    <div @click.capture="test1">
      <div @click.stop="test2">
        测试
      </div>
    </div>
  </div>
</template>

4、.once
只触发一次，无论你点击多少下，函数就只触发一次

5、.self
当前元素自身时触发处理函数时才会触发函数

<template>
  <div class="xxx">
    <div @click.self="test1">
    测试1
      <div @click="test2">
        测试2
      </div>
    </div>
  </div>
</template>

大的div里面有个小的div，当点击小的div，大的div事件不会触发