前言
在各种前端页面中,比如用户信息注册的页面,往往有多个输入框和多个选项列表。
为了避免用户选错或者输入错误,可以在前端页面上实时将多个输入框的内容拼接起来,显示到页面或者弹出的窗口中,帮助用户核对、检查输入的内容是否有错,提高用户体验。
本文介绍了在 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文章来源:https://www.toymoban.com/news/detail-495157.html
2.@input 用法
利用 @input 函数可以监控输入框或者选项列表内容变化的特性,我们可以给每个输入框或选项列表绑定一个监视器,监控到内容变化后就自动更新内容,并用 v-model 绑定需要实时预览的内容,实现内容实时更新的效果。文章来源地址https://www.toymoban.com/news/detail-495157.html
二、代码实例
<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;
}
},
到了这里,关于Vue:实现输入框/选择列表内容更改,页面实时预览多个内容变化的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!