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