v-model的修飾符和使用
v-model的修飾符
v-model.lazy 只有在input輸入框發生一個blur時才觸發
v-model.trim 將用戶輸入的前後的空格去掉
v-model.number 將用戶輸入的字符串轉換成number
在input textarea select中使用
一下代碼都沒有寫出js部分,請在data中自行添加對應屬性。
當使用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類型了。
v-model在input textarea select中使用,前面我們都是在input的type = text中使用的,在textarea中和它是一樣的,唯一區別是這個是多行的。
在type為radio中使用
你的性別是? 男:<input v-model="sex" type="radio" value="male"> 女:<input v-model="sex" type="radio" value="famale"> <br /> <span> {{ sex }} </span>
這時選中哪個,sex的值就是其value
在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)設置成一個數組。
在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)設置成一個數組
v-model的修飾符和使用