<div id="app">
<div class="p-5">
<h3>select 單選</h3>
<p>你還要吃什麼？</p>
<p>{{ selectAnswer }}</p>
<select class="form-select" v-model="selectAnswer">
<option :value="" disabled>說吧，你要吃什麼？</option>
<option v-for="item in products" :key="item.name" :value="item.name">{{item.name}} / {{item.price}} 元</option>
</select>
<hr>
<h3>select 多選</h3>
<p>你還要吃什麼？</p>
<p>{{selectAnswer2}}</p>
<select class="form-select" v-model="selectAnswer2" multiple>
<option selected disabled value="">說吧，你要吃什麼？</option>
<option :value="item.name" v-for="item in products" :key="item.name">
{{item.name}} / {{item.price}} 元
</option>
</select>
</div>
</div>
const App = {
data() {
return {
name: "小明",
num: "5",
text: "一段文字敘述",
checkAnswer: true,
checkAnswer2: "小明還沒回覆",
checkAnswer3: [],
radioAnswer: "豆漿",
selectAnswer: "",
selectAnswer2: ["蛋餅", "小籠包"],
products: [
{
name: "蛋餅",
price: 30,
vegan: false
},
{
name: "飯糰",
price: 35,
vegan: false
},
{
name: "小籠包",
price: 60,
vegan: false
},
{
name: "蘿蔔糕",
price: 30,
vegan: true
}
],
productsObj: {
chineseOmelette: {
name: "蛋餅",
price: 30,
vegan: false
},
riceBall: {
name: "飯糰",
price: 35,
vegan: false
},
soupDumpling: {
name: "小籠包",
price: 60,
vegan: false
},
radishCake: {
name: "蘿蔔糕",
price: 30,
vegan: true
}
}
};
},
methods: {}
};
Vue.createApp(App).mount("#app");
