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>
<!--這時選中哪一個，sex的值就是其value-->

(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>
<!--在多選時，要把data區中的v-model綁定的屬性（sexual_orientation）設置成一個數組。-->     

(5)select

<!--你的家鄉在哪？-->
<select v-model="from" name="" id="">
<option name="湖北" value="1">湖北</option>
<option name="湖南" value="2">湖南</option>
</select>
<span>{{ from }}</span>

<!--select中也能夠多選
你想去哪？-->
<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>
<!--和checkbox 同樣請將data中的v-model綁定的那個屬性（from）設置成一個數組-->