前言

在各種前端頁面中，比如用戶信息注冊的頁面，往往有多個輸入框和多個選項列表。

為了避免用戶選錯或者輸入錯誤，可以在前端頁面上實時將多個輸入框的內(nèi)容拼接起來，顯示到頁面或者彈出的窗口中，幫助用戶核對、檢查輸入的內(nèi)容是否有錯，提高用戶體驗。

本文介紹了在 Vue 中如何實現(xiàn)用戶輸入多個內(nèi)容或者選擇多個選項列表，與多個內(nèi)容拼接起來顯示到頁面上，實現(xiàn)實時預(yù)覽的效果。

一、@input

1.@input 簡介

@input是input框中的值變化時觸發(fā)的函數(shù)

@change、@input、@blur事件三者比較
@change在輸入框發(fā)生變化且失去焦點后觸發(fā)；
@input在輸入框內(nèi)容發(fā)生變化后觸發(fā)（在界面加載數(shù)據(jù)以前）
@blur失去焦點就觸發(fā)

注意：
@change先于@blur
@input和change的默認(rèn)參數(shù)為輸入內(nèi)容，而blur的默認(rèn)參數(shù)為dom節(jié)點。

更多介紹可以參考：
vue表單中輸入框事件的使用@input、@keyup.enter、@change、@blur
Vue中@input用法以及v-model示例
Vue中@change、@input和@blur的區(qū)別以及什么是@keyup

2.@input 用法

利用 @input 函數(shù)可以監(jiān)控輸入框或者選項列表內(nèi)容變化的特性，我們可以給每個輸入框或選項列表綁定一個監(jiān)視器，監(jiān)控到內(nèi)容變化后就自動更新內(nèi)容，并用 v-model 綁定需要實時預(yù)覽的內(nèi)容，實現(xiàn)內(nèi)容實時更新的效果。文章來源地址http://www.zghlxwxcb.cn/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="用戶信息預(yù)覽：" 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>

//根據(jù)內(nèi)容長度，實時計算預(yù)覽框的長度
text(){
	return function(value){
	  if(value == '' || value == 0){
	    return '200px'
	  }else{
	    return (String(value).length*13+70) + 'px'
	  }
	}
}

//根據(jù)性別選擇的變化，實時更新內(nèi)容
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;
  }
},

//根據(jù)輸入備注內(nèi)容的變化，實時更新內(nèi)容
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;
  }
},

到了這里，關(guān)于Vue：實現(xiàn)輸入框/選擇列表內(nèi)容更改，頁面實時預(yù)覽多個內(nèi)容變化的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！