Vue:实现输入框/选择列表内容更改,页面实时预览多个内容变化
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
Vue:实现输入框/选择列表内容更改,页面实时预览多个内容变化
前言
在各种前端页面中,比如用户信息注册的页面,往往有多个输入框和多个选项列表。
为了避免用户选错或者输入错误,可以在前端页面上实时将多个输入框的内容拼接起来,显示到页面或者弹出的窗口中,帮助用户核对、检查输入的内容是否有错,提高用户体验。
本文介绍了在 Vue 中如何实现用户输入多个内容或者选择多个选项列表,与多个内容拼接起来显示到页面上,实现实时预览的效果。
一、@input
1.@input 简介
@input是input框中的值变化时触发的函数
@change、@input、@blur事件三者比较
@change在输入框发生变化且失去焦点后触发;
@input在输入框内容发生变化后触发(在界面加载数据以前)
@blur失去焦点就触发
注意:
@change先于@blur
@input和change的默认参数为输入内容,而blur的默认参数为dom节点。
更多介绍可以参考:
vue表单中输入框事件的使用@input、@keyup.enter、@change、@blur
Vue中@input用法以及v-model示例
Vue中@change、@input和@blur的区别以及什么是@keyup
2.@input 用法
利用 @input 函数可以监控输入框或者选项列表内容变化的特性,我们可以给每个输入框或选项列表绑定一个监视器,监控到内容变化后就自动更新内容,并用 v-model 绑定需要实时预览的内容,实现内容实时更新的效果。
二、代码实例
<el-form :model="user_data" :rules="user_rules" ref="ruleForm" label-width="230px" id="user_form">
<el-row>
<el-col :span="12">
<el-form-item label="性别:" prop="gender">
<el-select
v-model="user_data.gender"
style="width: 200px"
placeholder="请选择"
@input="handleGenderChange"
>
<el-option value="1" label="男"></el-option>
<el-option value="2" label="女"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="备注:" prop="bz">
<el-input
class="bz"
v-model="user_data.bz"
placeholder="必填项"
@input="handleBzChange"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="用户信息预览:" prop="yhxx">
<el-input
type="text"
class="yhxx"
v-model="user_data.yhxx"
:disabled="true"
:style="{width:text(user_data.yhxx)}"
></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
//根据内容长度,实时计算预览框的长度
text(){
return function(value){
if(value == '' || value == 0){
return '200px'
}else{
return (String(value).length*13+70) + 'px'
}
}
}
//根据性别选择的变化,实时更新内容
handleGenderChange(item){
this.user_data.gender = item == "1"?"男":"女";
if(this.user_data.bz.length > 0){
this.user_data.yhxx = this.user_data.gender+","+this.user_data.bz;
}else{
this.user_data.yhxx = this.user_data.gender;
}
},
//根据输入备注内容的变化,实时更新内容
handleBzChange(item){
this.user_data.bz = item;
if(this.user_data.bz.length > 0){
this.user_data.yhxx = this.user_data.gender+","+this.user_data.bz;
}else{
this.user_data.yhxx = this.user_data.gender;
}
},
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)