Vue指令修飾符,v-bind對(duì)樣式控制的增強(qiáng),computed計(jì)算屬性,watch監(jiān)視器詳解
更新時(shí)間：2025年06月17日 09:01:36 作者：Gen鄧艮艮
這篇文章主要介紹了Vue指令修飾符,v-bind對(duì)樣式控制的增強(qiáng),computed計(jì)算屬性,watch監(jiān)視器,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
指令修飾符
所謂指令修飾符就是通過"."指明一些指令后綴，不同的后綴封裝了不同的處理操作，可以簡(jiǎn)化代碼
按鍵修飾符
@keyup.enter：當(dāng)點(diǎn)擊enter鍵時(shí)觸發(fā)
v-model修飾符
v-model.trim：去除首尾空格v-model.number：轉(zhuǎn)數(shù)字
事件修飾符
- @事件名.stop：阻止冒泡
- @事件名.prevent：阻止默認(rèn)行為
- @事件名.stop.prevent：可以連用，既阻止事件冒泡也阻止默認(rèn)行為
v-bind對(duì)樣式控制的增強(qiáng)
操作class
- 語法：:class = “對(duì)象/數(shù)組”
- 對(duì)象語法：:class = “{類名1:布爾值, 類名2:布爾值}”；使用場(chǎng)景：一個(gè)類名，來回切換
- 數(shù)組語法：:class = “[類名1, 類名2, 類名3]”；使用場(chǎng)景：批量添加或刪除類
操作style
- 語法：:style = “{CSS屬性名1:CSS屬性值, CSS屬性名2:CSS屬性值}”
computed計(jì)算屬性
概念
- 基于現(xiàn)有的數(shù)據(jù)，計(jì)算出來的新屬性。依賴的數(shù)據(jù)變化，自動(dòng)重新計(jì)算
語法
- 聲明在computed配置項(xiàng)中，一個(gè)計(jì)算屬性對(duì)應(yīng)一個(gè)函數(shù)
- 使用起來和普通屬性一樣使用{{計(jì)算屬性名}}
computed: {
計(jì)算屬性名 () {
計(jì)算邏輯
return 結(jié)果
}
}注意：
- computed配置項(xiàng)和data配置項(xiàng)是同級(jí)的
- computed中的計(jì)算屬性雖然是函數(shù)的寫法，但他依然是個(gè)屬性
- computed中的計(jì)算屬性不能和data中的屬性同名
- 使用computed中的計(jì)算屬性和使用data中的屬性是一樣的用法
- computed中的計(jì)算屬性內(nèi)部的this依然指向的是Vue實(shí)例
watch監(jiān)視器
作用：
- 監(jiān)視數(shù)據(jù)變化，執(zhí)行一些業(yè)務(wù)邏輯或異步操作
語法：
watch同樣聲明在跟data同級(jí)的配置項(xiàng)中
watch: {
// 該方法會(huì)在數(shù)據(jù)變化時(shí)，觸發(fā)執(zhí)行
數(shù)據(jù)屬性名(newValue, oldValue) {
業(yè)務(wù)邏輯
}
對(duì)象.屬性名(newValue, oldValue) {
業(yè)務(wù)邏輯
}
}完整寫法
watch: {
數(shù)據(jù)屬性名: {
deep: true, // 深度監(jiān)視（針對(duì)復(fù)雜類型）
immediate: true, // 是否立刻執(zhí)行一次handler
handler (newValue){
業(yè)務(wù)邏輯
}
}
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue實(shí)現(xiàn)固定位置顯示功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
這篇文章主要介紹了.html頁面引入vue并使用公共組件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了使用vue-cli3打包dist路徑問題修改打包配置，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
函數(shù)式組件就是沒有管理任何狀態(tài),也沒有監(jiān)聽任何傳遞給它的狀態(tài),也沒有生命周期方法,它只是一個(gè)接受一些 prop 的函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3封裝全局函數(shù)式組件方法的相關(guān)資料,需要的朋友可以參考下2023-06-06
本文主要介紹了vite搭建vue3項(xiàng)目的搭建步驟,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-09-09
這篇文章主要介紹了webpack中的optimization配置詳解,主要就是根據(jù)不同的策略來分割打包出來的bundle,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
vue+epubjs實(shí)現(xiàn)電子書閱讀器的基本功能
這篇文章主要為大家詳細(xì)介紹了如何使用vue+epubjs實(shí)現(xiàn)電子書閱讀器的基本功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
vue3+vite assets動(dòng)態(tài)引入圖片的三種方法及解決打包后圖片路徑錯(cuò)誤不顯示的問題
這篇文章主要介紹了vue3+vite assets動(dòng)態(tài)引入圖片的幾種方式，解決打包后圖片路徑錯(cuò)誤不顯示的問題,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
vue2實(shí)現(xiàn)directive自定義指令的封裝與全局注冊(cè)流程
自定義指令是對(duì)普通DOM元素進(jìn)行的底層操作,它是一種有效的的補(bǔ)充和擴(kuò)展,不僅可以用于定義任何的dom操作,并且是可以復(fù)用的,下面這篇文章主要給大家介紹了關(guān)于vue2實(shí)現(xiàn)directive自定義指令的封裝與全局注冊(cè)流程的相關(guān)資料,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue axios同步請(qǐng)求解決方案,需要的朋友可以參考下2017-09-09