1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
|
<div id="app"> <h4>字串</h4> {{ text }} <input type="text" class="form-control" v-model="text"> <hr> </div> <script> var app = new Vue({ el: '#app', data: { text: '', textarea: '', checkbox1: false, checkboxArray: [], singleRadio: '', selected: '', }, }); </script>
|
使用 v-model 綁定 textarea 輸入字串
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
|
<div id="app"> <pre>{{ textarea }}</pre> <textarea cols="30" rows="3" class="form-control" v-model="textarea"> </textarea> </div> <script> var app = new Vue({ el: '#app', data: { text: '', textarea: '', checkbox1: false, checkboxArray: [], singleRadio: '', selected: '', }, }); </script>
|
checkbox 的原始預設值是 true/false
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
|
<div class="form-check"> <input type="checkbox" class="form-check-input" id="check1" v-model="checkbox1"> <label class="form-check-label" for="check1"> 你要不要看電影 </label> </div>
<script> var app = new Vue({ el: '#app', data: { text: '', textarea: '', checkbox1: false, checkboxArray: [], singleRadio: '', selected: '', }, }); </script>
|
v-model 與 v-for 的表單運用:以陣列方式運用 checkbox:
先用 v-model 取出不同的值,再加入空陣列 checkboxArray 裡,接下來用 v-for 取出值渲染在畫面上。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
|
<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">{{item}}</span>。</p>
<script> var app = new Vue({ el: '#app', data: { text: '', textarea: '', checkbox1: false, checkboxArray: [], singleRadio: '', selected: '', }, }); </script>
|
運用 radio
使用方式與上面雷同,先用 v-model 取出不同的值,再加入字串 singleRadio ,接下來用 v-for 取出值渲染在畫面上。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
|
<div class="form-check"> <input type="radio" class="form-check-input" id="radio2" value="雞" v-model="singleRadio"> <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="singleRadio"> <label class="form-check-label" for="radio3">豬</label> </div> <div class="form-check"> <input type="radio" class="form-check-input" id="radio4" value="牛" v-model="singleRadio"> <label class="form-check-label" for="radio4">牛</label> </div> <p>晚餐火鍋裡有 <span v-for="item in singleRadio">{{item}}</span>。</p>
<script> var app = new Vue({ el: '#app', data: { text: '', textarea: '', checkbox1: false, checkboxArray: [], singleRadio: '', selected: '', }, }); </script>
|
運用 select
option 的保留為空的預設值,亦同樣以 v-model 取出不同的值,再加入字串 selected 。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
|
<select name="" id="" class="form-control" v-model="selected"> <option value="" disabled>--請選擇--</option> <option value="賤人">--賤人--</option> <option value="美女">--美女--</option> </select> <script> var app = new Vue({ el: '#app', data: { text: '', textarea: '', checkbox1: false, checkboxArray: [], singleRadio: '', selected: '', }, }); </script>
|
v-for 製作表單資料
- 直接在 option 裡面以
v-for
運用 selectData
- value 直接用
item
繪製 (value 是動態屬性因此要加 v-bind)
- 直接插入 item 在花括號裡面
1 2 3 4 5 6 7
|
<select name="" id="" class="form-control" v-model="selected2"> <option disabled value="">請選擇</option> <option :value="item" v-for="item in selectData"> {{item}} </option> </select> <p>小明喜歡的女生是 {{ selected2 }}。</p>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
|
<script> var app = new Vue({ el: '#app', data: { singleRadio: '', selected: '', selectData: ['小美', '可愛小妞', '漂亮阿姨'], selected2: '', multiSelected: [], sex: '男生',
// 修飾符 lazyMsg: '', age: '', trimMsg: '' }, }); </script>
|
v-for 製作多選
在 select
元素上加上 multiple
屬性,並透過 shift 與 cmc 選擇
1 2 3 4 5 6 7
|
<select name="" id="" class="form-control" multiple v-model="multiSelected"> <option value="小美">小美</option> <option value="可愛小妞">可愛小妞</option> <option value="漂亮阿姨">漂亮阿姨</option> </select> <p>小明喜歡的女生是 <span v-for="item in multiSelected">{{ item }} </span>。</p>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
|
<script> var app = new Vue({ el: '#app', data: { singleRadio: '', selected: '', selectData: ['小美', '可愛小妞', '漂亮阿姨'], selected2: '', multiSelected: [], sex: '男生',
// 修飾符 lazyMsg: '', age: '', trimMsg: '' }, }); </script>
|
複選框
在 input 元素上加上布林屬性
1 2 3 4
|
<div class="form-check"> <input type="checkbox" class="form-check-input" id="sex" v-model="sex" true-value="男生" false-value="女生"> <label class="form-check-label" for="sex">{{ sex }}</label> </div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
|
<script> var app = new Vue({ el: '#app', data: { singleRadio: '', selected: '', selectData: ['小美', '可愛小妞', '漂亮阿姨'], selected2: '', multiSelected: [], sex: '男生',
// 修飾符 lazyMsg: '', age: '', trimMsg: '' }, }); </script>
|
表單與修飾符
必須實際 onChange 後才會將資料呈現在畫面上
1 2
|
{{ lazyMsg }} <input type="text" class="form-control" v-model.lazy="lazyMsg">
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
|
<script> var app = new Vue({ el: '#app', data: { singleRadio: '', selected: '', selectData: ['小美', '可愛小妞', '漂亮阿姨'], selected2: '', multiSelected: [], sex: '男生',
// 修飾符 lazyMsg: '', age: '', trimMsg: '' }, }); </script>
|
將 input 輸出轉為純數值
1 2
|
<pre>{{ age }}</pre> <input type="number" class="form-control" v-model.number="age">
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
|
<script> var app = new Vue({ el: '#app', data: { singleRadio: '', selected: '', selectData: ['小美', '可愛小妞', '漂亮阿姨'], selected2: '', multiSelected: [], sex: '男生',
// 修飾符 lazyMsg: '', age: '', trimMsg: '' }, }); </script>
|
1 2
|
{{ trimMsg }}緊黏的文字 <input type="text" class="form-control" v-model.trim="trimMsg">
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
|
<script> var app = new Vue({ el: '#app', data: { singleRadio: '', selected: '', selectData: ['小美', '可愛小妞', '漂亮阿姨'], selected2: '', multiSelected: [], sex: '男生',
// 修飾符 lazyMsg: '', age: '', trimMsg: '' }, }); </script>
|
近期评论