vue系列之二 指令

2021-09-08 09:01:18 字數 1150 閱讀 5447

為了2023年,重新學一遍vue

個人理解,如有錯誤請指出

vue 裡面以 v- 開的屬性叫做指令。

拿個例項來說引入吧:

有乙個文字框,同步顯示並計算輸入字串的長度

v-model能夠和 data 資料同步的的乙個指令

v-bind 和 v-model 的區別在於能夠顯示 data 裡面的值,但是卻不會同步(一般說可控和不可控,不知道這個說法對不對)

v-bind繫結 data裡面的值 可以省略為 :

if有沒空間

show有沒空間

show有沒空間

仔細看輸出的兩個紅框部分:

v-if: 當為false的時候節點直接不渲染

v-show: 當為false的時候節點會多出乙個樣式 display:none

乙個固定的迴圈次數

簡單的迴圈陣列

在複雜一點的雙重的迴圈

v-for 可以巢狀迴圈,固定迴圈

乙個簡單的顯示隱藏

我被控制顯示還是隱藏

v-on 可以省略為 @ 符號

等等等… 夜深了,今天就到這裡吧!

臨走前再來乙個:

Vue基本使用二 指令

指令 directives 是帶有 v 字首的特殊屬性 用來設定當前元素的文字內容。相當於 innertext 的功能 v text msg 預設的文字內容h1 v html msg 預設的文字內容h1 v bind title msg v bind zhidingyi xm 預設的文字內容h1 t...

Vue的學習之路二 指令學習

v cloak p v text msg h4 div v text msg2 div v html msg2 div type button value 按鈕 v bind title mytitle 123 type button value 按鈕 title mytitle 123 v on ...

vue ivew(二)指令之v bind

v bind 簡單的理解就是它將某屬性與乙個變數繫結,這個變數可以在js檔案中修改賦值。縮寫 預期 any with argument object without argument 引數 attrorprop optional 修飾符 prop 作為乙個 dom property 繫結而不是作為 ...