一、文本框

1.1 普通文本框

1
2
3
4
5
6
7
8
9
10
11
<div id="app-1">
<p><input v-model="textBox" placeholder="输入内容...">输入的内容:{{ textBox }}</p>
</div>
<script type="text/javascript">
var vm1 = new Vue({
el: '#app-1',
data: {
textBox: ''
}
})
</script>

1.2 数字文本框

1
2
3
4
5
6
7
8
9
10
11
<div id="app-1">
<p><input v-model.number="numberTextBox" type="number" placeholder="输入内容..."> 输入的内容:{{ numberTextBox }}</p>
</div>
<script type="text/javascript">
var vm1 = new Vue({
el: '#app-1',
data: {
numberTextBox: ''
}
})
</script>

.number参数会强制把返回值转成Number类型,因为就算是type="number",返回的也是字符串型

1.3 多行输入框

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="app-1">
<p><textarea v-model="multiTextBox" placeholder="输入内容..."></textarea></p>
<p>输入的内容:</p>
<p style="white-space:pre">{{ multiTextBox }}</p>
</div>
<script type="text/javascript">
var vm1 = new Vue({
el: '#app-1',
data: {
multiTextBox: ''
}
})
</script>

style="white-space:pre"表示空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签

二、复选框

2.1 单个复选框

1
2
3
4
5
6
7
8
9
10
11
12
<div id="app-1">
<input type="checkbox" id="checkbox" v-model="singleCheckBox">
<label for="checkbox">{{ singleCheckBox }}</label>
</div>
<script type="text/javascript">
var vm1 = new Vue({
el: '#app-1',
data: {
singleCheckBox: false
}
})
</script>

2.2 定义属性单个复选框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app-1">
<input type="checkbox" id="checkbox" v-model="customSingleCheckBox" v-bind:true-value="customTrue" v-bind:false-value="customFalse">
<label for="checkbox">{{ customSingleCheckBox }}</label>
</div>
<script type="text/javascript">
var vm1 = new Vue({
el: '#app-1',
data: {
customTrue: '真',
customFalse: '假',
customSingleCheckBox: '假'
}
})
</script>

v-bind:true-value设置为真时的属性,v-bind:false-value设置为假时的属性

2.3 多个复选框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="app-1">
<input type="checkbox" id="tansea" value="TanSea" v-model="multiCheckBox">
<label for="tansea">TanSea</label>
<input type="checkbox" id="google" value="Google" v-model="multiCheckBox">
<label for="google">Google</label>
<input type="checkbox" id="baidu" value="Baidu" v-model="multiCheckBox">
<label for="baidu">Baidu</label>
<p>选择的项:{{ multiCheckBox }}</p>
</div>
<script type="text/javascript">
var vm1 = new Vue({
el: '#app-1',
data: {
multiCheckBox: []
}
})
</script>

三、单选框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
复制代码
<div id="app-1">
<input type="radio" id="male" value="男" v-model="radioBox">
<label for="male"></label>
<input type="radio" id="female" value="女" v-model="radioBox">
<label for="female"></label>
<p>选择的项:{{ radioBox }}</p>
</div>
<script type="text/javascript">
var vm1 = new Vue({
el: '#app-1',
data: {
radioBox: ''
}
})
</script>

四、下拉框

4.1 普通下拉框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app-1">
<select v-model="comboBox">
<option disabled value="">请选择一项</option>
<option></option>
<option></option>
</select>
<p>选择的项:{{ comboBox }}</p>
</div>
<script type="text/javascript">
var vm1 = new Vue({
el: '#app-1',
data: {
comboBox: ''
}
})
</script>

4.2 动态绑定下拉框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="app-1">
<select v-model="dynamicComboBox">
<option v-for="optionItem in optionItems" v-bind:value="optionItem.value">
{{ optionItem.text }}
</option>
</select>
<p>选择的项:{{ dynamicComboBox }}</p>
</div>
<script type="text/javascript">
var vm1 = new Vue({
el: '#app-1',
data: {
dynamicComboBox: '',
optionItems: [
{ value: 'TanSea', text: '双子宫殿' },
{ value: 'Google', text: '谷歌搜索' },
{ value: 'Baidu', text: '百度搜索' }
]
}
})
</script>

4.3 多选列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app-1">
<p><select v-model="multiComboBox" multiple>
<option>双子宫殿</option>
<option>谷歌搜索</option>
<option>百度搜索</option>
</select></p>
<p>选择的项:{{ multiComboBox }}</p>
</div>
<script type="text/javascript">
var vm1 = new Vue({
el: '#app-1',
data: {
multiComboBox: []
}
})
</script>

转载请保持原始链接

原始链接: https://ru23.com/note/79c90ec.html