Vue：实现输入框/选择列表内容更改，页面实时预览多个内容变化

╰半夏微凉° 2024-03-16 21:51 119阅读 0赞

#### Vue：实现输入框/选择列表内容更改，页面实时预览多个内容变化 ####

*  前言
 *  一、@input
 *   *  1.@input 简介
     *  2.@input 用法
 *  二、代码实例

--------------------

## 前言 ##

在各种前端页面中，比如用户信息注册的页面，往往有多个输入框和多个选项列表。

**为了避免用户选错或者输入错误，可以在前端页面上实时将多个输入框的内容拼接起来，显示到页面或者弹出的窗口中，帮助用户核对、检查输入的内容是否有错，提高用户体验。**

本文介绍了在 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_keyup.enter_change_blur]  
[Vue中@input用法以及v-model示例][Vue_input_v-model]  
[Vue中@change、@input和@blur的区别以及什么是@keyup][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;
      }
    },

[vue_input_keyup.enter_change_blur]: https://blog.csdn.net/qq_42697806/article/details/127015417
[Vue_input_v-model]: https://blog.csdn.net/sinat_41747081/article/details/103255761
[Vue_change_input_blur_keyup]: https://blog.csdn.net/weixin_45288172/article/details/127668500