Vue學習從入門到精通(五)
今天主要學習一下表單輸入繫結。v-model
指令在表單<input>
<textarea>
<select>
等元素上建立雙向資料繫結。它會根據控制元件型別自動選取正確的方法來更新資料。
v-model
會忽略所有表單元素的value
、checked
、selected
、特性的初始值,而總是將Vue例項的資料作為資料來源。你應該通過Javascript在元件的data選項中宣告初始值。
對於需要使用輸入法 (如中文、日文、韓文等) 的語言,你會發現 v-model
不會在輸入法組合文字過程中得到更新。如果你也想處理這個過程,請使用 input
事件。
文字
<template>
<div>
<input v-model="message" placeholder="input message" />
<br/>
<span>Message is :{{message}}</span>
</div>
</template>
<script>
export default{
name:'HelloWorld',
data (){
return {
message:''
}
}
}
</script>
執行後,可以看到輸入的內容可以動態的顯示出來。
多行文字
<template>
<div>
<textarea v-model="message" placeholder="input message" > </textarea>
<br/>
<span>Message is :{{message}}</span >
</div>
</template>
<script>
export default{
name:'HelloWorld',
data (){
return {
message:''
}
}
}
</script>
執行後可以看到一個文字輸入框,輸入多行文字都能實時的顯示更新出來。
單個複選框
單個複選框,繫結的值時bool值,這個和input的value無關,具體程式碼如下:
<template>
<div>
<input type="checkbox" id="checkbox1" v-model="checked" />
<br/>
<span>checked: {{checked}}</span>
</div>
</template>
<script>
export default{
name:'HelloWorld',
data (){
return {
checked:''//注意;如果此處checked為非陣列型別,選中後結果為bool值
}
}
}
</script>
大家可以嘗試下,<input type="checkbox" id="checkbox1" value="張三" v-model="checked" />
選中後仍然是bool值。當然瞭如果大家想使用自定義的值時,可以使用這兩個欄位true-value
,false-value
,具體程式碼如下:
<template>
<div>
<input type="checkbox" id="checkbox" v-model="checked" true-value="AAA"
false-value="BBB">
<label for="checkbox">{{ checked }}</label>
</div>
</template>
<script>
export default{
name:'HelloWorld',
data (){
return {
checked:''
}
}
}
</script>
程式碼執行起來後,可以看到選中後顯示AAA,取消選中時顯示BBB。
多個複選框
true-value
和false-value
只適合同一個checkbox
組只有一個checkbox
的情況,如果有多個checkbox
,請使用value
進行值繫結。
<template>
<div>
<input type="checkbox" id="checkbox1" value="張三" v-model="checked" />
<br/>
<input type="checkbox" id="checkbox2" value="李四" v-model="checked" />
<br/>
<input type="checkbox" id="checkbox3" value="王五" v-model="checked" />
<br/>
<span>checked: {{checked}}</span>
</div>
</template>
<script>
export default{
name:'HelloWorld',
data (){
return {
checked:[]
}
}
}
</script>
通過選中不同的選項,大家可以發現自己選中的內容可以實時更新。
選擇框
1,單選時,程式碼如下:
<template>
<div>
<select v-model="selected">
<option disabled value="">請選擇</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</div>
</template>
<script>
export default{
name:'HelloWorld',
data (){
return {
selected:''//當然我們也可以在這個地方設定預設選中項
}
}
}
</script>
執行程式碼後大家可以看到點選請選擇,就可以選擇自己要選中的選項。
2,多選時,程式碼如下:
<template>
<div>
<select v-model="selected" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br/>
<span>selected is:{{selected}}</span>
</div>
</template>
<script>
export default{
name:'HelloWorld',
data (){
return {
selected:[]
}
}
}
</script>
v-for和複選框結合起來使用,程式碼如下:
<template>
<div>
<select v-model="selected" multiple style="width: 50px;">
<option v-for="option in options" :value="option.value">
{{option.text}}
</option>
</select>
<br/>
<span>selected is:{{selected}}</span>
</div>
</template>
<script>
export default{
name:'HelloWorld',
data (){
return {
selected:[],
options:[
{text:"A",value:'A'},
{text:"B",value:'B'},
{text:"C",value:'C'}
]
}
}
}
</script>
執行後可以看到和上面同樣的效果
值繫結
對於單選按鈕,複選框以及選擇框的選項,v-model
繫結的值通常是靜態字串(對於複選框也可以是布林值)。但是有時我們可能想把值繫結到 Vue 例項的一個動態屬性上,這時可以用 v-bind 實現,並且這個屬性的值可以不是字串。
單選按鈕
<template>
<div>
<input type="radio" name="name" v-model="pick" value="a" /><label>a</label>
<br/>
<input type="radio" name="name" v-model="pick" value="b" /><label>b</label>
<br/>
<input type="radio" name="name" v-model="pick" value="c" /><label>c</label>
<br/>
<span>picked: {{pick}}</span>
</div>
</template>
<script>
export default{
name:'HelloWorld',
data (){
return {
pick:''
}
}
}
</script>
執行後,可以看到選中後,選中的值顯示在下面。
更多優質文章,可以微信掃碼關注: