Vue 事件的$event參數(shù)=事件的值案例
template
<el-table :data="dataList"> <el-table-column label="id" prop="id"></el-table-column> <el-table-column label="name" prop="name"> <template v-slot="props"> <el-input-number :min="0" v-model="props.row.count" @change="updateProduct($event)" size="mini" ></el-input-number> </template> </el-table-column> </el-table>
Script 部分
export default {
data() {
return {
dataList: [
{ id: 1, name: '001', count: 1 },
{ id: 2, name: '002', count: 2 },
{ id: 3, name: '003', count: 3 },
]
}
},
methods: {
updateProduct(value) {
console.info(value)
}
}
}
補(bǔ)充：vue學(xué)習(xí)筆記：事件中的$event對象作用
vue中點擊事件或者是其他的事件可以通過在事件中添加$event進(jìn)行對標(biāo)簽元素的dom獲取或者修改標(biāo)簽指的屬性等等。具體用法如下：
1、可以通過$event進(jìn)行對dom元素的獲取
html：
<button data-get="數(shù)據(jù)按鈕" @click="getRvent($event)">獲取事件對象</button>
首先我們先打印一下$event對象看一下，對象中有哪些屬性，如下圖
其中srcElement就是當(dāng)前這個標(biāo)簽元素，可以根據(jù)此屬性來獲取當(dāng)前點擊事件的標(biāo)簽元素。
比如我們可以對獲取的元素進(jìn)行操作，就像原生js那樣，如下：
// 獲取事件對象e
getRvent(e){
console.log(e);
e.srcElement.style.background="red";
}
點擊前：
點擊后：
2、除此之外我們還可以對標(biāo)簽自身的屬性進(jìn)行修改，比如說改變button按鈕的文字值，這個時候是使用的$event下面的textContent進(jìn)行修改。
點擊按鈕之前：
點擊按鈕之后：
3、我們也可以通過$event獲取標(biāo)簽自定義的屬性值，如下：
html代碼：
<button data-get="數(shù)據(jù)按鈕" @click="getRvent($event)">獲取事件對象</button>
這個button按鈕標(biāo)簽有一個自定義的屬性data-get，這時候我們可以根據(jù)$event的屬性target.dataset.get屬性進(jìn)行獲取
可以在控制臺打印一下，如下：
其實有時候我們可以用元素本身自帶的屬性進(jìn)行操作，摒棄添加class等操作，減少代碼的冗余性，細(xì)化代碼。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。如有錯誤或未考慮完全的地方，望不吝賜教。
相關(guān)文章
這篇文章主要介紹了vue 項目軟鍵盤回車觸發(fā)搜索事件，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
下面小編就為大家分享一篇使用vue toggle實現(xiàn)點擊切換class的示例。具有很好的參考價值。希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Javascript vue.js表格分頁，ajax異步加載數(shù)據(jù)
這篇文章主要介紹了Javascript vue.js表格分頁，ajax異步加載數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2016-10-10
本篇文章主要介紹了詳解Vue.js分發(fā)之作用域槽，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
修改el-form-item中的label里面的字體邊距或者大小問題
這篇文章主要介紹了修改el-form-item中的label里面的字體邊距或者大小問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了詳解vue移動端項目代碼拆分記錄，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了Element el-row el-col 布局組件使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue 授權(quán)獲取微信openId操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章要給大家介紹的是vue和drf以及第三方滑動驗證碼接入的實現(xiàn)，下文小編講詳細(xì)講解該內(nèi)容，感興趣的小伙伴可以和小編一起來學(xué)習(xí)奧2021-10-10
Vue3+TypeScript封裝axios并進(jìn)行請求調(diào)用的實現(xiàn)
這篇文章主要介紹了Vue3+TypeScript封裝axios并進(jìn)行請求調(diào)用的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04