vue中使用@change

很多組件有@change事件，那到底如何獲取到當(dāng)前的參數(shù)呢？

1.自定義參數(shù)：

比如一個(gè)a-checkbox的change事件：

<a-checkbox :checked="source.check" @change="onCheckAllChange($event,source)">
       {{source.name}}
 </a-checkbox>
 onCheckAllChange(e,source) { 
       let checked =e.target.checked // true 或者 false 
 },

 這樣你可以清楚checkbox的當(dāng)前值，也能傳遞過(guò)去自己要傳遞的其他參數(shù)

2.簡(jiǎn)單使用，不需要參數(shù)

比如一個(gè)select添加change事件不傳遞參數(shù)：

<a-select v-model="selType" @change="dbTypeChange">
                <a-select-option  v-for="item in dbTypes" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
</a-select>
// 方法定義，加入e
 dbTypeChange(e){
    console.log('e',e) // e 就是當(dāng)前選擇項(xiàng)的value
  },

vue的@change的用法

@change 是 Vue.js 中用于監(jiān)聽(tīng)表單元素值變化的事件處理器。

• 雙向綁定： 通常，你會(huì)將 @change 事件與 v-model 一起使用。v-model 是 Vue.js 提供的一種指令，用于實(shí)現(xiàn)表單元素和數(shù)據(jù)之間的雙向綁定。當(dāng)用戶(hù)輸入內(nèi)容時(shí)，v-model 會(huì)自動(dòng)更新數(shù)據(jù)，而當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，輸入框的值也會(huì)隨之更新。
• 事件觸發(fā)時(shí)機(jī)： @change 事件會(huì)在表單元素的值發(fā)生變化并失去焦點(diǎn)（通常是用戶(hù)輸入后按下回車(chē)鍵或點(diǎn)擊其他地方）時(shí)觸發(fā)。這與 @input 事件不同，后者會(huì)在每次輸入時(shí)都觸發(fā)。
• 事件處理器： 你需要在 Vue 組件中定義一個(gè)方法，作為 @change 事件的處理器。這個(gè)方法將在表單元素的值發(fā)生變化后被調(diào)用，你可以在其中執(zhí)行任何操作，比如驗(yàn)證用戶(hù)輸入、向服務(wù)器發(fā)送請(qǐng)求、觸發(fā)其他組件的更新等。
• 傳遞事件對(duì)象： 如果需要訪(fǎng)問(wèn)事件對(duì)象，可以在方法中使用 $event 參數(shù)來(lái)獲取。例如，如果你想要獲取輸入框的新值，可以這樣做：@change=“handleChange($event)”，然后在方法中使用 $event.target.value 來(lái)獲取新值。
• 應(yīng)用場(chǎng)景： @change 通常用于處理用戶(hù)輸入的最終確認(rèn)，比如搜索框中的關(guān)鍵字輸入、表單的提交等。在這些情況下，你可能只想在用戶(hù)完成輸入并準(zhǔn)備進(jìn)行下一步操作時(shí)才執(zhí)行相應(yīng)的邏輯。

通常用于監(jiān)聽(tīng)表單輸入框等元素的變化，以便在值發(fā)生變化時(shí)執(zhí)行特定的操作。具體用法如下：

<template>
  <input type="text" v-model="inputValue" @change="handleChange" />
</template>
<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleChange() {
      // 在這里可以處理輸入框的值變化后的操作
      console.log('輸入框的值發(fā)生變化，新的值是：', this.inputValue);
    }
  }
};
</script>

上面的例子中，我們?cè)?<input> 元素上使用了 v-model 來(lái)雙向綁定 inputValue 數(shù)據(jù)，同時(shí)使用 @change 監(jiān)聽(tīng)了輸入框的變化事件。當(dāng)輸入框的值發(fā)生變化時(shí)，handleChange 方法將被調(diào)用，你可以在該方法中執(zhí)行任何你需要的操作，例如驗(yàn)證輸入、觸發(fā)其他邏輯等。

也可以在同一頁(yè)面中，點(diǎn)擊相關(guān)按鈕進(jìn)行切換觸發(fā)，如下：

		<div style="float: right; margin: 10px 10px 10px 10px"> 
            <el-radio-group v-model="isShow" @change="showChange">
              <el-radio-button v-model="isShow" :label=1>value1</el-radio-button>
              <el-radio-button v-model="isShow" :label=2>value2</el-radio-button>
            </el-radio-group>
        </div>

JS

showChange(){
      if(this.isShow == 1){
        //執(zhí)行的操作
      }else{
        //執(zhí)行的操作
      }
    }

到此這篇關(guān)于vue中使用@change的文章就介紹到這了,更多相關(guān)vue使用@change內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論