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>
|
近期评论