如果我們今天要將陣列的資料放進 select
單選下拉式選單中,可以在 option
標籤中使用 v-for
,將 item
帶入到選項中,記得要在 value
前面加上 :
,因為 value
的值是隨著陣列的內容而不同是一種動態的屬性,最後我們使用 v-model
將 select
和資料 selected
綁定,當我們點擊選項後,選項的 value
就會變成 selected
的值。
<body>
<div class="app">
<select v-model="select">
<option disabled>請選擇</option>
<option v-for="item in dataArray" :value="item">{{item}}</option>
</select>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'.app',
data:{
dataArray:['Leo','Perter','Harry'],
selected:''
}
});
</script>
先前我們有提到,若將 checkbox
綁定在資料上,當我們點擊 checkbox
欄位,此時綁定的資料會出現 true
或者 false
,如果我們想要將 true
或 false
替換成自己想要的值,可以使用 true-value ='我們設定的值'
,false-value ='我們設定的值'
,比如果們將 true
設定成男生,false
設定成女生,之後點擊 checkbox
後,checkbox
綁定的資料 gender
就會呈現男生或女生。
<body>
<div class="app">
<input type="checkbox" v-model='checkbox' true-value='男生' false-value='女生'>{{gender}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'.app',
data:{
gender:'男生',
}
});
</script>
先前我們提到,如果我們使用 v-model
將 input
輸入還有資料 text
綁定,此時當我們在 input
輸入欄位內輸入值,{{text}}
畫面沒有馬上跟著改變,而是等到當我們輸入結束,跳出輸入框時,畫面才跟著變動,原因就在於我們在 v-model
加上 lazy
,來達成這個效果。
<body>
<div class="app">
<input type="text" v-model.lazy='text'> {{text}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'.app',
data:{
text:''
}
});
</script>
如果我們使用 typeof
查看 input
綁定的資料 text
,可以發現它是字串的形式,如果我們想要將字串的形式改成數字,可以再 v-model
後面加上 .number
,此時我們會發現 text
的 typeof
變成是 number
。
<body>
<div class="app">
<input type="text" v-model.number='text'> {{typeof(text)}}{{text}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'.app',
data:{
text:''
}
});
</script>
如果我們要 input
輸入欄位的開頭字尾的空白給刪除,可以再 v-model
後面加上 .trim
,此時就算我們在輸入欄位的開頭還是結尾加上空白鍵,最後在畫面呈現時都會省略。
<body>
<div class="app">
<input type="text" v-model.trim='text'>{{text}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'.app',
data:{
text:''
}
});
</script>