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;
  }
},