表单下拉框

知识点

v-model
select

表单下拉框绑定

<div id="myApp"><h3>你最喜欢的NBA球星是：</h3><select v-model="likedNBAStar" style="width:210px;"><option>科比</option><option>詹姆斯</option><option>哈登</option><option>库里</option><option>杜兰特</option></select><h3>我的全明星：</h3><select v-model="likedNBAStars" multiple style="width:210px;height:210px;"><option>阿德托昆博</option><option>怀特赛德</option><option>阿尔德里奇</option><option>戴维斯</option><option>格里芬</option><option>詹姆斯</option><option>杜兰特</option><option>巴特勒</option><option>德罗赞</option><option>哈登</option><option>科比</option><option>韦德</option><option>伦纳德</option><option>库里</option><option>欧文</option><option>保罗</option><option>林树豪</option></select><h3>选择结果</h3><p>我最最喜欢: {{ likedNBAStar }}</p><p>我的全明星: {{ likedNBAStars }}</p></div>
<script>var myApp = new Vue({el: '#myApp', data: {likedNBAStar: null,likedNBAStars: [],},methods: {},});
</script>

显示：

表单修饰符

知识点

.lazy
.number
.trim

.lazy

用户输入内容时不做绑定数据的更新处理，在控件的onchange事件中更新绑定的变量。

用户名：<input v-model.lazy="username">

.number

将用户输入的内容转换为数值类型，如果用户输入非数值的时候，则返回NaN。

年龄：<input v-model.number="age" type="number">

.trim

自动去掉用户输入内容两端的空格。

意见：<input v-model.trim="content">

综合例

<div id="myApp"><h1>用户注册</h1><div><label for="username">用户：</label><input type="text" id="username" v-model.lazy="username" @change="checkUsername"><span v-if="checkUsernameOK">可注册</span></div><div><label for="age">年龄：</label><input type="number" id="age" v-model.number="age"></div><div><label for="content">个人简介：</label><br/><textarea id="content" v-model.trim="content" cols="55" rows="8"></textarea></div><h4>信息区</h4><p>{{username}}</p><p>{{age}}</p><p><pre>{{content}}</pre></p>
</div>
<script>var myApp = new Vue({el: '#myApp', data: {username: "",checkUsernameOK: false,age: "",content: "",},methods: {checkUsername: function(){if (this.username.length > 0) this.checkUsernameOK = true;else this.checkUsernameOK = false;},},});
</script>

显示：

表单下拉框、表单修饰符（.lazy、.number、.trim）相关推荐

vue修饰符 .lazy .number .trim
.lazy 在输入框中,v-model 默认是同步数据,使用 .lazy 会转变为在 change 事件中同步 , 也就是在失去焦点或者按下回车键时才更新 <template>< ...
修饰符.lazy .number .trim
1.lazy v-model 在每次 input 事件触发后将输入框的值与数据进行同步,也就是在失去焦点或者按下回车键时才更新 <template><div><p> ...
excel 表做下拉框_Excel工作表的组合框下拉列表
excel 表做下拉框 Would you prefer a bigger font size for items in a data validation drop down list? Would ...
css修改layui的下拉框样式 js_layui创建表单下拉框样式不显示
border-left: 5px solid #009688; 注释:solid实体,实心样式: Blockquote:块引用;Fieldset:字段集; 1.所有浏览器都支持标签. fieldse ...
纯原生javascript下拉框表单美化实例教程
html的表单有很强大的功能,在web早期的时候,表单是页面向服务器发起通信的主要渠道.但有些表单元素的样式没办法通过添加css样式来达到满意的效果,而且不同的浏览器之间设置的样式还存在兼容问题,比如 ...
javascript实现下拉框表单美化的详细实例教程
html的表单有很强大的功能,在web早期的时候,表单是页面向服务器发起通信的主要渠道.但有些表单元素的样式没办法通过添加css样式来达到满意的效果,而且不同的浏览器之间设置的样式还存在兼容问题,比如 ...
【已解决】如何做excel表的下拉框多选
最近因为项目需求,要制作一个excel导入的模板,模板中要求某几列的下拉框是多选的..不得不临时研究了一下vba.其间各种心酸不多说...... 首先,这个是需要启用宏,在vb编辑器里写代码,所以你要 ...
layer弹出层表单下拉框案例
layer.open({title: '请选择你的爱好',content: `<form class="layui-form"><div class=" ...
js中select下拉框重置_Web测试中需要注意的16个小细节
随着Internet和Intranet/Extranet的快速增长,Web已经对商业.工业.银行.财政.教育.政府和娱乐及我们的工作和生活产生了深远的影响.许多传统的信息和数据库系统正在被移植到互联网 ...

表单下拉框、表单修饰符（.lazy、.number、.trim）

表单下拉框

知识点

表单下拉框绑定

显示：

表单修饰符

知识点

.lazy

.number

.trim

综合例

表单下拉框、表单修饰符（.lazy、.number、.trim）相关推荐

最新文章

热门文章

表单下拉框、表单修饰符（.lazy、.number、.trim）

表单下拉框

知识点

表单下拉框绑定

显示： 表单修饰符

知识点

.lazy

.number

.trim

综合例

表单下拉框、表单修饰符（.lazy、.number、.trim）相关推荐

最新文章

热门文章

显示：

表单修饰符