<div id="app">
<div class="p-5">
<h3>checkbox 單選框</h3>
<p>小明，你是吃飽沒？</p>
<p>{{ checkAnswer}}</p>
<p>{{ checkAnswer ? '吃飽了' : '還沒'}}</p>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check1" v-model="checkAnswer">
<label class="form-check-label" for="check1">小明回覆</label>
</div>
<hr>
<h3>checkbox 單選延伸</h3>
<p>小明，你是吃飽沒？</p>
<p>{{ checkAnswer2 }}</p>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check2" v-model="checkAnswer2" true-value="吃飽了" false-value="還沒吃飽">
<label class="form-check-label" for="check2">小明回覆</label>
</div>
<hr>
<h3>checkbox 複選框</h3>
<p>你還要吃什麼？</p>
<p>{{ checkAnswer3.join(' ') }}</p>
<p>{{ checkAnswer3 }}</p>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check3" value="蛋餅" v-model="checkAnswer3">
<label class="form-check-label" for="check3">蛋餅</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check4" value="蘿蔔糕" v-model="checkAnswer3">
<label class="form-check-label" for="check4">蘿蔔糕</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check5" value="豆漿" v-model="checkAnswer3">
<label class="form-check-label" for="check5">豆漿</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");
