close
<div id="app">
<h4>字串</h4>
{{ text }}
<input type="text" v-model ="text"class="form-control">
<hr>
{{ textarea }}
<textarea cols="30" rows="3" v-model ="textarea" class="form-control"></textarea>
<hr>
<h4>Checkbox 與 Radio</h4>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check1">
<label class="form-check-label" for="check1"> ... </label>
</div>
<hr>
<div class="form-check">
<input type="checkbox" class="form-check-input"v-model=
"checkboxArray" id="check2" value="雞">
<label class="form-check-label" for="check2">雞</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" v-model=
"checkboxArray" id="check3" value="豬">
<label class="form-check-label" for="check3">豬</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" v-model=
"checkboxArray" id="check4" value="牛">
<label class="form-check-label" for="check4">牛</label>
</div>
<p>晚餐火鍋裡有 {{checkboxArray}}。</p>
<hr>
<div class="form-check">
<input type="radio" class="form-check-input" id="radio2" value="雞">
<label class="form-check-label" for="radio2">雞</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="radio3" value="豬">
<label class="form-check-label" for="radio3">豬</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="radio4" value="牛">
<label class="form-check-label" for="radio4">牛</label>
</div>
<p>晚餐火鍋裡有 ...。</p>
<hr>
<h4>Select</h4>
<select name="" id="" class="form-control" v-model="selected">
<option value="請選擇">{{text}}</option>
<option value="雞">雞</option>
<option value="豬">豬</option>
</select>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
text: '',
textarea: '',
checkbox1: false,
checkboxArray: [],
singleRadio: '',
selected: '',
},
});
</script>
文章標籤
全站熱搜
留言列表
Node.js (1)
