【Vue表單】v-model繫結下拉列表

摘要： 微信訂閱號：Rabbit_svip vue要繫結下拉列表會稍微有點不同。 因為下拉列表不是一個標籤能搞掂的。 原生的html寫法如下 <select> <option value="Vue.js"...

vue要繫結下拉列表會稍微有點不同。

因為下拉列表不是一個標籤能搞掂的。

原生的html寫法如下

<select>
<option value="Vue.js">Vue.js</option>
<option value="React.js">React.js</option>
<option value="Angular.js">Angular.js</option>
</select>

通常下拉列表會用到兩個標籤， <select> 和 <option> 。

在Vue中要繫結，需要把 v-model 寫在 select 標籤裡。

程式碼如下

<template>
<div id="app">
<select v-model="selectCurriculums">
<option v-for="(curriculum, index) in curriculums" :key="index">{{curriculum}}</option>
</select>

<span>{{selectCurriculums}}</span>
</div>
</template>

<script>
export default {
name: 'app',
data () {
return {
selectCurriculums: 'React.js',
curriculums: ['Vue.js', 'React.js', 'Angular.js']
}
}
}

curriculums 是初始化陣列，提供值給 option 。

selectCurriculums 提供了一個初始值。

每當選中一個 <option> ，就會對應的更新 selectCurriculums 的資料。