vue 修饰符

vue

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

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

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

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

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

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

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

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

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

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

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

<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

以上是 vue 修饰符的全部内容，来源链接： utcz.com/z/379617.html

表单修饰符在我们