Vue: 入力ボックス/選択リストの内容の変更を実現し、ページ上で複数の内容の変更をリアルタイムでプレビューします。

---

序文

ユーザー情報の登録ページなど、さまざまなフロントエンドページには、複数の入力ボックスや複数のオプションリストが存在することがよくあります。

ユーザーが誤った選択や入力ミスをすることを防ぐために、複数の入力ボックスの内容をフロントエンド ページ上でリアルタイムに結合し、ページまたはポップアップ ウィンドウに表示して、ユーザーが確認しやすくすることができます。入力内容が間違っているかどうかを確認し、ユーザーエクスペリエンスを向上させます。

この記事では、ユーザーが Vue で複数のコンテンツを入力または複数のオプション リストを選択できるようにし、ページ上で複数のコンテンツを結合して表示して、リアルタイム プレビュー効果を実現する方法を紹介します。

---

一、@input

1. @input の概要

@input は、入力ボックスの値が変更されたときにトリガーされる関数です

@change、@input、および @blur イベントの比較
@change は入力ボックスが変更されてフォーカスを失った後にトリガーされ、@
input は入力ボックスの内容が変更された後 (インターフェースがデータをロードする前) にトリガーされ、
@blur はフォーカスを失ったときにトリガーされます。

注:
@change は @blur よりも優先されます。
@input と change のデフォルト パラメータは入力コンテンツですが、blur のデフォルト パラメータは dom ノードです。

詳細については、「
vue フォームでの入力ボックス イベントの使用 @input、@keyup.enter、@change、@blur
Vue での @input の使用法と、vue
での @change、@input、および @blur の違い」を参照してください。モデル例 Vue と @keyup とは

2.@inputの使用法

@input 関数を使用して入力ボックスまたはオプション リストの内容の変更を監視すると、各入力ボックスまたはオプション リストにモニターをバインドし、内容の変更を監視した後に内容を自動的に更新し、v-model を使用して次のことを行うことができます。リアルタイムでバインドする プレビューされたコンテンツは、コンテンツのリアルタイム更新の効果を実現します。

2. コード例

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