Vue: Realize the content change of the input box/selection list, and preview multiple content changes in real time on the page

---

foreword

In various front-end pages, such as user information registration pages, there are often multiple input boxes and multiple option lists.

In order to prevent users from making wrong selections or input errors, the contents of multiple input boxes can be spliced ​​together in real time on the front-end page and displayed on the page or pop-up window to help users check and check whether the input content is wrong and improve user experience.

This article introduces how to enable users to enter multiple content or select multiple option lists in Vue, and then splicing and displaying multiple content on the page to achieve real-time preview effect.

---

One, @input

1. Introduction to @input

@input is a function triggered when the value in the input box changes

Comparison of @change, @input, and @blur events
@change triggers after the input box changes and loses focus;
@input triggers after the content of the input box changes (before the interface loads data)
@blur triggers when it loses focus

Note:
@change precedes @blur
The default parameter of @input and change is the input content, while the default parameter of blur is the dom node.

For more introduction, please refer to:
The use of input box events in vue form @input, @keyup.enter, @change, @blur
@input usage in Vue and
the difference between @change, @input and @blur in v-model example Vue and What is @keyup

2. @input usage

Using the @input function to monitor the change of the content of the input box or option list, we can bind a monitor to each input box or option list, and automatically update the content after monitoring the content change, and use v-model to bind it in real time The previewed content realizes the effect of real-time updating of the content.

2. Code example

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