elementUI vue v-model的修饰符

v-model的修饰符

1. v-model.lazy 只有在input输入框发生一个blur时才触发
2. v-model.trim 将用户输入的前后的空格去掉
3. v-model.number 将用户输入的字符串转换成number

(1)input type=text

　　当使用v-model将input输入框与name绑定那么输入框改变的同时name的值也会同步的发生改变

<input type="text" v-model="name"><br />
<span> {
     { name }} span>

　　但是，这样会对使用有影响，所以我们可以用v-model的修饰符lazy,v-model.lazy 只有在input输入框发生一个blur时才触发

<input type="text" v-model.lazy="name"><br />
<span> {
     { name }} span>

v-model.trim 将用户输入的前后的空格去掉,我们在输入框中输入很多空格后再输入内容，下面的span还是原来那样的，不会多出空格，原因是HTML只显示一个空格，但是name的值就不一样了，它会将这些空格算上，我们可以在span上加一个pre标签，这时这些空格就会显示出来

<input type="text" v-model="name"><br />
<pre><span> {
     { name }} span>pre>

　　v-model.trim就是用来清除这些多余的空格的，当然如果是密码等输入框，请不要加此修饰，有些用户会用空格做密码。

<input type="text" v-model.trim="name"><br />
<pre><span> {
     { name }} span>pre>

这时你无论给它前后加多少空格都会被清除掉。

v-model.number 将用户输入的字符串转换成number
<input type="text" v-model="age"><br />
<span> {
     { age }} span>

这种情况下，你输入的数字会被自动转换成字符串，可以在console中app.age来查看，如果加上.number

<input type="text" v-model.number="age"><br />
<span> {
     { age }} span>

　　这样就会把你输入的数字转换成number，在console中app.age查看是number类型了。

(2)input type=textarea

　　v-model在input textarea select中使用，前面我们都是在input的type = text中使用的，在textarea中和它是一样的，唯一区别是这个是多行的。

(3)input type=radio

男：<input v-model="sex" type="radio" value="male">
女：<input v-model="sex" type="radio" value="famale">
　　<br />
   <span> {
     { sex }} span>

(4)input type=checkbox

男：<input v-model="sexual_orientation" type="checkbox" value="male">
女：<input v-model="sexual_orientation" type="checkbox" value="famale">
   <br />
   <span> {
     { sexual_orientation }} span>
     

(5)select

<select v-model="from" name="" id="">
<option name="湖北" value="1">湖北option>
<option name="湖南" value="2">湖南option>
select>
<span>{
     { from }}span>

<select v-model="from" name="" id="" multiple>
<option name="湖北" value="1">湖北option>
<option name="湖南" value="2">湖南option>
<option name="湖南" value="3">河北option>
<option name="湖南" value="4">河南option>
select>
<span>{
     { from }}span>

 

转载于:https://www.cnblogs.com/yysbolg/p/9876276.html