Vue從零開始總結(jié)19

2021-04-18 18:15 作者:忘魂兒 0人讀過 | 我要投稿

v-model的使用方法，它呢,效果上是雙向綁定的，就是說你改它也改，它改你也改

這里我們用輸入框進(jìn)行演示

上代碼：

<div id="app">
?<input type="text" v-model="message">
?<h2>{{message}}</h2>
</div>

data:{
? ?message:'hello world',
? ?movies:['海賊','火影'],
? ?counter:0
}

如圖：

如果不用v-model來實(shí)現(xiàn)的話，按照之前學(xué)的內(nèi)容我們可以這么寫

<div id="app">
?<input type="text" :value="message" @input="message=$event.target.value">
?<h2>{{message}}</h2>
</div>

或者在input事件里面再加一個函數(shù)

@input="change"

methods中change(event){

? ? ?this.message=event.target.value;

}

再用單選框進(jìn)行演示

沒加v-model之前，我們只能通過設(shè)置同一個name實(shí)現(xiàn)互斥事件，checked實(shí)現(xiàn)默認(rèn)選項(xiàng)

再添加model后，name和checked都不用寫，但需要做的是雙向綁定數(shù)據(jù)用于傳遞給服務(wù)器

<label for="man">
?男
?<input type="radio" id="man" value="男" v-model="sex">//value一定要寫?。?！
</label>
<label for="feman">
?女
?<input type="radio" id="feman" ?value="女" v-model="sex">
</label>
<h3>你的性別是:{{sex}}</h3>

data:{
? ?message:'hello world',
? ?movies:['海賊','火影'],
? ?counter:0,
? ?sex:'男'
}

效果如下：

再用復(fù)選框（單選框）進(jìn)行演示

有的時(shí)候需要用戶查看隱私協(xié)議，并詢問他們是否同意，如果同意則進(jìn)行下一步

那么，代碼演示：

<p>是否同意協(xié)議？</p>
<label for="agree"> 同意協(xié)議</label>
?<input type="checkbox" ?v-model="isAgree" id="agree">//v-model動態(tài)綁定isAgree，根據(jù)用戶的選擇來實(shí)時(shí)更改

<h2>你選擇的是：{{isAgree}}</h2>
<button :disabled="!isAgree">下一步</button>//disabled使無效，為true的時(shí)候使無效，根據(jù)v-model傳過來的isAgree值來判斷是否允許下一步

data:{
? ?isAgree:false
}

效果如下：

再用復(fù)選框（多選框）來進(jìn)行演示,注意動態(tài)綁定的就是數(shù)組了，而且屬于同一數(shù)組

<input type="checkbox" value="唱歌" v-model="hobbies">唱歌
<input type="checkbox" value="畫畫" v-model="hobbies">畫畫
<input type="checkbox" value="攝影" v-model="hobbies">攝影
<input type="checkbox" value="二次元" v-model="hobbies">二次元
<h2>你的愛好是：{{hobbies}}</h2>

data:{
? ?isAgree:false,
? ?hobbies:[]
}

效果如下：

如果用select標(biāo)簽來做的話

單選：

<select name="" v-model="hobby">
?<option value="唱歌" >唱歌</option>
?<option value="畫畫">畫畫</option>
?<option value="攝影">攝影</option>
?<option value="二次元">二次元</option>
</select>
<h2>你的愛好是：{{hobby}}</h2>

data:{
? ?hobby:'畫畫'
}

效果如下：

多選

<select name="" v-model="hobbies" multiple>
?<option value="唱歌" >唱歌</option>
?<option value="畫畫">畫畫</option>
?<option value="攝影">攝影</option>
?<option value="二次元">二次元</option>
</select>
<h2>你的愛好是：{{hobbies}}</h2>

data:{
? ?isAgree:false,
? ?hobbies:[]
}

效果如下：

接下來升級一下，應(yīng)用值綁定！

<label v-for="item in originalHobbies"? :for="itemId">
?<input type="checkbox" :value="item" :id="itemId" v-model="hobbies">{{item}}
</label>
<h2>你的愛好是：{{hobbies}}</h2>

data:{
? ?hobbies:[],
? ?originalHobbies:['唱歌','畫畫','攝影','二次元']
}

效果如下：