使用Vue實現下拉選單框批量新增選項

二木成林發表於2020-01-18
Vue

使用Vue實現下拉選單框批量新增選項，設定被選中的值。

程式碼如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>學習Vue</title>
		<!-- 使用CDN引入Vue.js -->
		<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 下拉選單框 -->
			<select v-model="selected" name="group">
				<!-- 迴圈為下拉選單框賦值 -->
				<option v-for="option in optionsList" v-bind:value="option.value">{{option.key}}</option>
			</select>
		</div>

		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					// 下拉選單框選項列表
					optionsList: [{
						key: "請選擇...",
						value: "select"
					}, {
						key: "唐僧",
						value: "tangseng"
					}, {
						key: "孫悟空",
						value: "sunwukong"
					}, {
						key: "豬八戒",
						value: "zhubajie"
					}, {
						key: "沙僧",
						value: "shaseng"
					}, {
						key: "小白龍",
						value: "xiaobailong"
					}],
					// 設定初始選中"小白龍"
					selected: "xiaobailong"
				}
			});
		</script>
	</body>
</html>

瀏覽器檢視：

相關文章