<div id="app">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check2" value="雞" v-model="checkboxArray">
<label class="form-check-label" for="check2">雞</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check3" value="豬" v-model="checkboxArray">
<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="checkboxArray">
<label class="form-check-label" for="check4">牛</label>
</div>
<p>晚餐火鍋裡有<span v-for="item in checkboxArray" :style="styleObj">{{ item }}</span></p>
</div>
var app = new Vue({
el: '#app',
data: {
checkboxArray: [],
styleObj: {
color: 'red'
}
},
})
External CSS
This Pen doesn't use any external CSS resources.