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