v-model
資料雙向綁定通常用在表單元素上。
資料雙向綁動的意思就是資料會同步更新在HTML和data中。
各種表單運用
input
最常見的input文字框,加上v-model="message"
後,這個文字輸入框就會自動與data雙向綁定。
<div id="app">
<input type="text" v-model="message" placeholder="輸入文字">
<p>{{message}}</p>
</div>
var vm = Vue.createApp({
data(){
return{
message: 'hello'
}
}
});
vm.mount('#app');
當輸入新文字到input
內,data
中的message
也會動態被更改並呈現到{{message}}
上
textarea
textarea 常用在意見回饋等地方,使用方法和input一模一樣!
<div id="app">
<textarea v-model="message" placeholder="輸入文字"></textarea>
<p>{{message}}</p>
</div>
radio(單選)
<div id="app">
<div>
<input type="radio" id="one" value="1" v-model="picked">
<label for="one"> One </label>
</div>
<div>
<input type="radio" id="two" value="2" v-model="picked">
<label for="two"> Two </label>
</div>
</div>
//兩個的 `v-model` 都對應到 picked
var vm = Vue.createApp({
data(){
return{
picked: 1
}
}
});
vm.mount('#app');
//這裡表示,data內 picked 的預設值是 1
當我們選取input時,data內的資訊就會動態更新。
checkbox(複選)
其實複選跟單選一樣,一樣是選取後動態更新,但因為是複選所以沒辦法只是簡單的 true/false ,需要使用陣列。
<div id="app">
<input type="checkbox" id="one" value="1" v-model="checkNums">
<label for="one"> One </label>
<input type="checkbox" id="two" value="2" v-model="checkNums">
<label for="two"> Two </label>
<input type="checkbox" id="three" value="3" v-model="checkNums">
<label for="three"> Three </label>
<input type="checkbox" id="four" value="4" v-model="checkNums">
<label for="four"> Four </label>
<input type="checkbox" id="five" value="5" v-model="checkNums">
<label for="five"> Five </label>
<P>Checked Numbers: {{checkNums}}</p>
</div>
var vm = Vue.createApp({
data(){
return{
checkNums= [];
}
}
});
vm.mount('#app');
//這裡表示,data內 checkNums 的預設值為空陣列(預設沒有選取任何東西)
上面是把選取起來的值動態更新到data內,然後data的預設為空陣列(預設沒有選取任何東西)。
除了這個,checkbox複選 的運用也可以用在另一個情境:
<div id="app">
<input type="checkbox" id="checkbox" v-model="isChecked" true-value="已選擇" false-value="未選擇">
<label for="checkbox"> check </label>
<p>status: {{isChecked}}</p>
</div>
var vm = Vue.createApp({
data(){
return{
isChecked= false;
//這個時候上方的 `{{isChecked}}` 是會用 true/false切換,如果想要讓它顯示不同的資料可以在上面加 `true-value` `false-value`
}
}
});
vm.mount('#app');
//這裡表示,data內 isChecked 的預設值為false
select 下拉選單
<div id="app">
<select v-model="selected">
<option disable value="">請選擇</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<p> Selected: {{selected || '未選擇'}} </p>
</div>
const vm = Vue.createApp({
data(){
return{
selected: '' ;
}
}
});
vm.mount('#app');
透過 v-for 製作下拉選單的選項
<select v-model="selected">
<option disable value="">請選擇</option>
<option :value="item"
v-for="item in selectData"
:key="item.id">
{{item}}
</option>
</select>
讓select下拉選單變多選
在select加上mutiple
透過shift
/cmd
/ctrl
來進行多選
<select v-model="selected" mutiple>
<option disable value="">請選擇</option>
<option :value="item"
v-for="item in selectData"
:key="item.id">
{{item}}
</option>
</select>
v-model 修飾子
修飾子會以.
的方式,加在指令後面。
.lazy
在我們前面的文字輸入例子中,只要敲一次鍵盤就會觸發一次input
事件,所以會看到邊輸入時,下方文字也跟者一起更改。如果只想要在輸入完後再更改呢? 我們就要把input
事件改為change
事件。 方法就是在後面加上.lazy
加上後只有在完成輸入(確定移開input)才會觸發。
.number
在input
輸入框中,雖然輸入數字,但實際上由DOM API取出的時候都會是以 字串形式出現。如果要讓他為數值,可以加上.number。
.trim
針對某個輸入框,想要過濾掉空白字元時可以使用。
與v-bind的運用
v-bind 可以控制屬性,我們可以透過 v-bind 來控制 是否開啟 disable
<input type="text" :disabled="isdisabled" v-model="message" placeholder="輸入文字">