vue之常用指令

2021-10-08 18:53:23 字數 1081 閱讀 1065

(1)mustache 插槽指令即} 比如}、}支援字串,表示式和方法等。

(2)v-once 該指令使用後表示元素或者元件只渲染一次,不會隨資料改變而改變。比如

(3) v-html 該指令可以解析html**並渲染,該指令後面往往跟上乙個string型別資料,比如其中url是html標籤片段。

(4)v-text 指令用途和}一樣,用於顯示文字內容,但沒有插值指令靈活,比如(5)v-pre 該指令使用後跳過元素編譯的過程,用於顯示原本的文字內容,比如 頁面上就會顯示}文字。

(6)v-cloak指令避免頁面出現}渲染閃動,比如

(7)v-bind資料繫結,用於資料動態顯示,縮寫「:屬性名」。屬性可以繫結字串,陣列,物件 等。

比如比如  類選擇器也可以繫結物件,其中isactive是變數

比如  style也可以繫結物件

(8)v-on 事件繫結,用於事件監聽,縮寫「@事件名」

注意:在事件定義需要乙個引數,但是在事件呼叫的時候不傳引數,vue會預設將瀏覽器生成的event事件物件作為引數傳入到方法。 

(9)v-show 指令用於節點的顯示與隱藏,比如隱藏,但還是存在dom中,只是給元素新增乙個行內樣式:display:none;

(10)v-if和v-show非常相似,都是決定乙個元素是否渲染。不同的是 v-if=flase 時,元素就不存在dom中。

注意:如果顯示與隱藏頻繁切換,選擇v-show,只有一次切換選擇v-if。

(11)v-for 遍歷物件或陣列或物件陣列,使用時給對應的元素新增:key屬性,為了高效的更新虛擬dom。

比如遍歷陣列

注意:在遍歷物件的時候,可以獲取物件的key和value,若只獲取乙個值,那麼獲取到的是value。

(12)v-model 表單繫結指令,實現雙向實時繫結。切記和:model是兩碼事。注意:v-model有一些修飾符,比如

v-model.lazy 可以讓資料失去焦點或回車時才會更新。

v-model.number可以讓輸入框的內容自動轉換成數字型別。比如'0123'->123

v-model.trim可以去除內容左右倆邊的空格

vue常用指令

1 v model id box type text v model br div var a new vue script 就和 ng model 乙個意思了 v html html v html html渲染過程中被解析 v text text 同上 意思就是資料渲染過程中被解析 v for v...

vue常用指令

常用內建指令 v text 更新元素的 textcontent v html 更新元素的 innerhtml v if 如果為true,當前標籤才會輸出到頁面 v else 如果為false,當前標籤才會輸出到頁面 v show 通過控制display樣式來控制顯示 隱藏 v for 遍歷陣列 物件...

vue常用指令

vue常用指令 1.v text v text主要用來更新textcontent,可以等同於js的text屬性 2.v html 雙大括號的方式會將資料解釋為純文字,而非html。為了輸出真正的html,可以用v html指令。它等同於js的innerhtml屬性。3.v pre v pre主要用來...