<div id="app">
<div class="p-5">
<h3>radio 單選框</h3>
<p>你還要吃什麼？</p>
<p>{{ radioAnswer }}</p>
<div class="form-check">
<input type="radio" class="form-check-input" id="radio1" value="蛋餅" v-model="radioAnswer">
<label class="form-check-label" for="radio1">蛋餅</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="radio2" value="蘿蔔糕" v-model="radioAnswer">
<label class="form-check-label" for="radio2">蘿蔔糕</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="radio3" value="豆漿" v-model="radioAnswer">
<label class="form-check-label" for="radio3">豆漿</label>
</div>
</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");
