vue 修饰符

修饰符，对于一个程序员来说并不陌生，现在让我们一起来收集一些我们常用的一些修饰符吧！
记住这些修饰符，并且用起来，保证可以让你在开发项目中节省更多时间，写代码过程中更加方便。

 

 

• 表单修饰符在我们

 

　　　　在我们通常写登录页面，或者关于 input 框  文本框的时候，就该用到的双向绑定 v-model ，获取后的内容是不是应该处理一下，这样就用到我们的修饰符了

<div>
     <input type="text" v-model="value">
     <p>{{value}}</p>
</div>

　　　　这里 input 框是没有加任何修饰符的，输入什么， value 马上跟着就显示出来了。下面就让我们来看看加了修饰符的吧！

 

　　　　.lazy

　　　　有时候我们希望，在我们输入完所有东西，光标离开才显示出来，这里就用到了这个修饰符了

<div>
   <input type="text" v-model.lazy="value">
   <p>{{value}}</p>
</div>

　　　　这样就可以实现上面说的效果了，光标离开输入框的时候，它才会更新显示，相当于在onchange事件触发更新，是不是少了很多的事呢！😄😄😄

 

　　　　.trim

　　　　在输入手机账号、密码、或者银行卡这些的，是不是应该有所处理呢，有的时候手快，前面或者后面不知道的情况下多敲了几个空格还是一只报错，别急，这个给你解决！

<input type="text" v-model.trim="value">

　　　　小心哦！这个只能去掉首尾的空格哦，内容中间的部分就不能去掉了

　　　　

　　　　.number

　　　　这个应该很容易理解吧！听见这个单词就大概猜的出了吧，我们先来看看代码

<input type="text" v-model.number="message">

　　　　这个如果你填写的开头是数字类型的话那么他就只显示数字出来。例：输入 123232kijjdhh  他只显示出 123232

　　　　如果你开头填写的是其他类型的话，他将没有用，输入什么返回什么，这个修饰符就相当于没有写  例：输入  abc1234  他显示出来的就是  abc1234

 

• 事件修饰符

　　　　.stop

　　　　有的时候，我们在父元素上面添加了个事件，在子元素又添加了一个事件的时候，我们点击子元素的时候，只想执行子元素的事件，但是父元素的事件也跟着执行了

<div @click="shout(2)">
  <button @click="shout(1)">ok</button>
</div>

//js
shout(e){
  console.log(e)
}
//1
//2

　　　　在这里我们点击OK，只想打印出1怎么办。只要阻止冒泡就行了，就相当于调用了event.stopPropagation()方法了。

<div @click="shout(2)">
  <button @click.stop="shout(1)">ok</button>
</div>
//只输出1