看過前幾篇文章的朋友應該會發現，我們開頭的範例都非常類似，一個下拉選單可以更改頁面中的值，今天也不例外，但要透過框架強化的項目會有所不同。

在案例中，我們的下拉選單內的值都是寫死在網頁上的，這部分其實有時候並不好維護：

<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來渲染頁面項目，接下來就讓我們看看用法吧！

v-for, v-bind

<div id="app">
    <p>
        <select v-model="state.type">
            <option v-for="item in state.types" v-bind:value="item.value">{{ item.title }}</option>
        </select>
    </p>
    <p>
        <select v-model="state.name">
            <option v-for="item in state.names" v-bind:value="item.value">{{ item.title }}</option>
        </select>
    </p>
    <p>Type: {{ state.type }}</p>
    <p>Framework: {{ state.name }}</p>
</div>

const { reactive } = Vue;
const app = {
    setup() {
        const state = reactive({
            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"},
            ],
        })
        return { state };
    }
}
const myVue = Vue.createApp(app).mount("#app");

透過上面的方式，將下拉選單資料置於vue中，再透過v-for在html元素中指定資料來源，其中v-bind是在HTML屬性中，如果需要用到vue data時使用，例如本範例中option的value。

v-bind可以縮寫用冒號進行縮寫，也就是上述案例HTML的4, 9行可以改寫如下：

<option v-for="item in state.names" :value="item.value">{{ item.title }}</option>
<option v-for="item in state.types" :value="item.value">{{ item.title }}</option>

當然這個案例還是有許多可以加強的地方，我們將會在未來的文章中繼續提升大家對Vue的認識，讓整個案例越來越完整。