v-model 綁定 Input
當使用者輸入內容的同時,text 的值會跟著改變並呈現於畫面上。
<input type="text" class="form-control" v-model="text" /> {{ text }}
var app = new Vue({
el: '#app',
data: {
text: '',
},
});
搭配 Input 使用的 v-model 修飾符
.lazy
加入 lazy 修飾符後,要按下 Enter 或是在旁邊點擊一下,資料才會繪製出來,不會在輸入時就馬上更新畫面。
<input type="text" v-model.lazy="lazyMsg" /> {{ lazyMsg }}
.number
藉由 number 修飾符將連接的字串資料轉為純數值的格式。
使用 typeof()
可以發現 <input type="number">
輸出並儲存的資料是「字串」格式。
<input type="number" v-model.number="age" />
<pre>{{ typeof(age) }} {{ age }}</pre>
.trim
加入 trim 修飾符,可以把字串「前後」多餘的空白去除。
<input type="text" v-model.trim="trimMsg" /> {{ trimMsg }}緊黏的文字
v-model 綁定 Textarea
新增 v-model 綁定 data 裡的 textarea,當使用者輸入內容的同時,textarea 的值跟著改變並呈現於畫面上。
<pre>{{ textarea }}</pre>
<textarea cols="30" rows="3" class="form-control" v-model="textarea"></textarea>
var app = new Vue({
el: '#app',
data: {
textarea: '',
},
});
v-model 綁定 Checkbox
Checkbox 依據數量分為單選與多選,只有一個的話就是單選 (true or false),多個就是多選 (Array)。
單選 Checkbox
<input type="checkbox" id="check1" v-model="checkbox1" />
<label for="check1"> 你要不要看電影 </label>
var app = new Vue({
el: '#app',
data: {
checkbox1: false,
},
});
上面的單選 Checkbox 預設的 value
值為 true
與 false
,如果我們要用別的值當作 value
,可以設定 true-value
與 false-value
屬性。
例如:
<input
type="checkbox"
id="sex"
v-model="sex"
true-value="男生"
false-value="女生"
/>
<label for="sex">{{ sex }}</label>
var app = new Vue({
el: '#app',
data: {
sex: '男生',
},
});
這裡因為資料 data: { sex: '男生', }
預設的值就是 true-value
,所以 Checkbox 預設為已勾選的狀態。
多選 Checkbox
新增 v-model 綁定 data
裡的 checkboxArray
。
依據 Checkbox 的數量,可以知道這邊的 Checkbox 是 Array 的格式。
<input type="checkbox" id="check2" value="雞" v-model="checkboxArray" />
<label for="check2">雞</label>
<input type="checkbox" id="check3" value="豬" v-model="checkboxArray" />
<label for="check3">豬</label>
<input type="checkbox" id="check4" value="牛" v-model="checkboxArray" />
<label for="check4">牛</label>
<p>晚餐火鍋裡有 <span v-for="item in checkboxArray">{{ item }} </span>。</p>
var app = new Vue({
el: '#app',
data: {
checkboxArray: [],
},
});
勾選之後,option
的 value
(雞 / 豬 / 羊)會儲存到 checkboxArray
陣列裡,而勾選的順序就等於 index
。
如果要把陣列資料呈現到畫面上,我們可以使用 v-for 把陣列的值一一抓出來。
<span v-for="item in checkboxArray">{{ item }} </span>
最後畫面呈現的順序,就會跟加入陣列的順序 (index) 一樣。
v-model 綁定 Radio
Radio 就沒有多選了,只有單選!
新增 v-model 綁定 data
裡的 singleRadio
,singleRadio
預設是一個空的字串。
選取任一個 radio
後,它的 value
會賦予到 singleRadio
上,然後花括號吃到 singleRadio
的值就會把資料呈現至畫面。
<input type="radio" id="radio2" value="雞" v-model="singleRadio" />
<label for="radio2">雞</label>
<input type="radio" id="radio3" value="豬" v-model="singleRadio" />
<label for="radio3">豬</label>
<input type="radio" id="radio4" value="牛" v-model="singleRadio" />
<label for="radio4">牛</label>
<p>晚餐火鍋裡有 {{ singleRadio }}。</p>
var app = new Vue({
el: '#app',
data: {
singleRadio: '',
},
});
v-model 綁定 Select
Select 標籤可以透過它的 v-model 與 option
裡的 value
將值帶進來。
新增 v-model 綁定 data
裡的 selected
,selected
預設為一個空字串。
因為 selected
預設是空值,所以這邊第一個 option
的 value
留空的話,就會是預設值。
※ 做表單時常用的小技巧:可以在 option
上加入 disabled
讓使用者選到其他的選項之後,沒辦法再選回「請選擇」的選項。
<select v-model="selected">
<option disabled value="">請選擇</option>
<option value="小美">小美</option>
<option value="可愛小妞">可愛小妞</option>
<option value="漂亮阿姨">漂亮阿姨</option>
</select>
<p>小明喜歡的女生是 {{ selected }}。</p>
var app = new Vue({
el: '#app',
data: {
selected: '',
},
});
※ option
標籤裡面的文字內容跟 value
的值可以不一樣,例如:<option value="阿姨">漂亮阿姨</option>
。
透過 v-for 產生選項
在 option
裡面使用 v-for:
<select v-model="selected2">
<option value="" disabled>請選擇</option>
<option :value="item" v-for="item in selectData">{{ item }}</option>
</select>
<p>小明喜歡的女生是 {{ selected2 }}。</p>
var app = new Vue({
el: '#app',
data: {
selectData: ['小美', '可愛小妞', '漂亮阿姨'],
selected2: '',
},
});
加上 multiple 製作出多選的 Select
利用 HTML 的特性,加上 multiple
屬性,就可以變成多選。
<select multiple v-model="multiSelected">
<option value="小美">小美</option>
<option value="可愛小妞">可愛小妞</option>
<option value="漂亮阿姨">漂亮阿姨</option>
</select>
<p>小明喜歡的女生是 <span v-for="item in multiSelected">{{ item }} </span>。</p>
var app = new Vue({
el: '#app',
data: {
multiSelected: [],
},
});
可以透過 shift 或 ctrl 來操作多選
以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫