看過前幾篇文章的朋友應該會發現,我們開頭的範例都非常類似,一個下拉選單可以更改頁面中的值,今天也不例外,但要透過框架強化的項目會有所不同。
在案例中,我們的下拉選單內的值都是寫死在網頁上的,這部分其實有時候並不好維護:
<select v-model="name">
<option value="Vue">Vue</option>
<option value="React">React</option>
<option value="Angular">Angular</option>
<option value="Laravel">Laravel</option>
<option value="CakePHP">CakePHP</option>
<option value="Django">Django</option>
</select>
甚至有些時候選單內的值,也會透過後端提供給我們,這部分我們可以將選單資料放在vue data中,再透過v-for來渲染頁面項目,接下來就讓我們看看用法吧!
HTML
<div id="app">
<p>
<select v-model="type">
<option v-for="item in types" v-bind:value="item.value">{{ item.title }}</option>
</select>
</p>
<p>
<select v-model="name">
<option v-for="item in names" v-bind:value="item.value">{{ item.title }}</option>
</select>
</p>
<p>Type: {{ type }}</p>
<p>Framework: {{ name }}</p>
</div>
Javascript
const app = Vue.createApp({
data() {
return {
type: 'Frontend',
name: 'Vue',
names:[
{title: "Vue", value: "Vue"},
{title: "React", value: "React"},
{title: "Angular", value: "Angular"},
{title: "Laravel", value: "Laravel"},
{title: "CakePHP", value: "CakePHP"},
{title: "Django", value: "Django"},
],
types:[
{title: "Frontend", value: "Frontend"},
{title: "Backend", value: "Backend"},
],
}
},
}).mount('#app');
透過上面的方式,將下拉選單資料置於vue中,再透過v-for在html元素中指定資料來源,其中v-bind是在HTML屬性中,如果需要用到vue data時使用,例如本範例中option的value。
v-bind可以縮寫用冒號進行縮寫,也就是上述案例HTML的4, 9行可以改寫如下:
<option v-for="item in names" :value="item.value">{{ item.title }}</option>
<option v-for="item in types" :value="item.value">{{ item.title }}</option>
當然這個案例還是有許多可以加強的地方,我們將會在未來的文章中繼續提升大家對Vue的認識,讓整個案例越來越完整。