條件判斷遍歷迴圈v model

2021-10-05 08:15:39 字數 2515 閱讀 7681

v-if v-else

使用者輸入型別切換小案例中,如果有輸入內容,發現切換仍保留之前內容。

因為vue在進行dom渲染時,出於效能考慮,會盡可能復用已經存在的元素,而不會建立新的元素。如果不希望進行復用,,則給對應的元素加上key屬性,且key的值要不同。

v-show和v-if的區別

當v-if條件為false時,會刪除對應的dom元素 (不停的刪除建立)

而v-show條件為false時,僅僅是修改元素樣式為 display:none

開發中

如果需要在顯示與隱藏之間切片很頻繁,則使用v-show

若只有一次切換,則使用v-if

v-for補充

遍歷陣列可以取(item,index)

遍歷物件如果只獲取乙個值,則為value;v-for=「value in obj」

如果獲取key和value 則是 v-for="(value,key) in obj"

如果獲取value、key、index,則 v-for="(value,key,index) in obj"

陣列中哪些方法是響應式的

注意:通過索引值修改陣列中的元素不是響應式的

例如 this.letters[0] = 『bbbb』,但是可以用vue提供的set方法來實現,如vue.set(this.letters,0,『bbbb』)。set(修改物件,索引值,修改後的值)

push、pop、shift、unshift、splice、sort、reverse

書籍專案補充知識

1、tofixed方法

numberobject.tofixed(n) 可以把number四捨五入為指定小數字數的數字

2、vue例項的filters過濾器

雙花括號插值用法

}<

/td>

filters:

}

可以實現資料的雙向繫結,結合表單元素使用

v-model其實是乙個語法糖,背後本質是包含兩個操作:

1、v-bind:繫結value屬性

2、v-on:給當前元素繫結input事件

"text" v-model=

"message"

>

"text"

:value=

"message" @input=

"message = $event.target.value"

v-model配合input表單radio使用

選中誰就會把value賦給***,實現view改變model

"radio" value=

"男" v-model=

"***"

>

"radio" value=

"女" v-model=

"***"

>

v-model配合input表單checkbox使用

1、單個勾選框

v-model對應的是布林值,為true表示選中,為false表示未選中

"checkbox" v-model=

"isagree"

>同意協議

isagree:

true

/false

2、多個勾選框

v-model對應的是乙個陣列,選中會將對應的value壓入陣列

"checkbox" value=

"籃球" v-model=

"hobbies"

>

"checkbox" value=

"足球" v-model=

"hobbies"

>

"checkbox" value=

"羽毛球" v-model=

"hobbies"

>

v-model配合input表單select使用

1、單個選項

將v-model寫在select中 選中誰就會把value賦給mylove

"mylove"

>

/option>

"orange"

>orange<

/option>

"banana"

>banana<

/option>

<

/select>

2、多選

給select新增multiple屬性,選中誰就會將該項的value值壓進陣列

v-model修飾符

1、number

預設情況下,輸入框輸入的內容都會被當成字串處理,那麼如果希望當作數字處理,可以用number修飾符修飾,會讓輸入框輸入的內容自動轉換成數字型別

2、lazy

預設情況view資料發生改變,data中的資料會立刻改變

lazy修飾符可以讓資料在回車或者失去焦點才會更新

3、trim

如果輸入內容首位有很多空格,會過濾掉

迴圈語句 條件判斷

為頁面新增9個無序列表 var str var div1 document.getelementbyid div1 var i 1 str div1.innerhtml str迴圈前執行多次語句寫在while中,迴圈條件必須寫在while 的最後 故也可以寫成 var str var div1 do...

PowerShell 條件判斷和迴圈

對於多資料處理,條件判斷和迴圈是常用的。下面簡單列出基本用法。比較運算子 eq 等於 ne 不等於 gt 大於 ge 大於等於 lt 小於 le 小於等於 contains 包含 notcontains 不包含 布林運算子 and 和 or 或 xor 異或 not 逆 var 布林運算 陣列運算 ...

條件判斷及迴圈語句

1 順序結構 從上往下依次執行 開始 語句一 語句二 結束 2 選擇結構 分支結構 有特定的語法格式,必須按照語法格式編寫 兩種選擇語句 1 if語句 2 switch語句 1 if語句 1 格式1 if 關係表示式 else 執行流程 首先判斷關係表示式看其結果是true還是false 如果是tr...