v-model的使用

這篇文章為大家帶來有關v-model的使用方法。大部分知識點都是大家經常用到的，為此分享給大家做個參考。一起跟隨小編過來看看吧。

v-model其實是一個語法糖，它的背后本質上是包含兩個指令操作：

1.v-bind綁定一個value屬性
2.v-on指令給當前元素綁定input事件*

v-model結合單選框使用

<label for="male">
<input type="radio" name="sex" id="male" value="男" v-model="sex" />男
</label>
<label for="female">
<input type="radio" name="sex" id="female" value="女" v-model="sex" />女
</label>
<h4>您的性別是{{sex}}</h4>

v-model結合checkbox的使用

單個checkbox
<input type="checkbox" name="" id="" value="" v-model="isAgree" />同意協議
<br />
<br />
<button :disabled="!isAgree">下一步</button>

多個checkbox
<input type="checkbox" name="" id="" value="籃球" v-model="hobbies"/> 籃球
<input type="checkbox" name="" id="" value="足球" v-model="hobbies"/>足球
<input type="checkbox" name="" id="" value="排球" v-model="hobbies"/>排球
<input type="checkbox" name="" id="" value="羽毛球" v-model="hobbies"/>地球
<input type="checkbox" name="" id="" value="棒球" v-model="hobbies"/>棒球
 <h4> 您的愛好是{{hobbies}}</h4> 

v-model結合select的使用

<select name="car" v-model="cars">

    <option value="寶馬">五菱宏光</option>
    <option value="奔馳">蘭博基尼</option>
    <option value="保時捷">瑪莎拉蒂</option>
    <option value="寶馬">勞斯萊斯</option>
    <option value="寶馬">凱迪拉克</option>
</select>

<select name="nvyou" v-model="nvyous" multiple>
    <option value ="小澤瑪利亞">小澤瑪</option>
    <option value ="蒼井空">三上悠</option>
    <option value="吉澤明步">吉澤明</option>
    <option value="松島楓">瀧澤蘿</option>
    <option value="早乙女露依">早乙女</option>
</select>

關于v-model的使用就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。