vue中使用@change

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

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

比如一個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的當前值，也能傳遞過去自己要傳遞的其他參數(shù)

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

比如一個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 就是當前選擇項的value
  },

vue的@change的用法

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

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

通常用于監(jiān)聽表單輸入框等元素的變化，以便在值發(fā)生變化時執(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>

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

也可以在同一頁面中，點擊相關按鈕進行切換觸發(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í)行的操作
      }
    }

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

最新評論