<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 数字文本框
<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 多行输入框
<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 单个复选框
<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 定义属性单个复选框
<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 多个复选框
<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>
三、单选框
复制代码 <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>
三、下拉框
3.1 普通下拉框
<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>
3.2 动态绑定下拉框
<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>
3.3 多选列表
<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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 如何在Symfony的表单中添加一个未绑定字段,否则绑定到一个实体?
- 表单 – 避免Symfony强制显示表单字段
- 细说 Angular 2+ 的表单(二):响应式表单
- 8款最新CSS3表单 环形表单很酷
- Golang Echo数据绑定中time.Time类型绑定失败
- 动态表单 form-create 2.5 版本来啦,帮你轻松搞定表单
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。