Vue模板語法、屬性繫結、條件渲染的學習

睡觉爱打呼噜發表於2024-05-13

Vue模板語法:
使用插值表示式的內容必須是有結果的內容才可以,就是需要return出來的才可以顯示出來。
插值表示式所表現的內容為純文字模式
如何避免
即所有的邏輯操作都在js裡面實現,不要再templete中實現可以完美的避免這個問題。

Vue屬性繫結
1.使用v-bind 進行屬性繫結 語法:v-bind:class/id =“名稱”
2.對於v-bind是將屬性進行繫結,如果屬性的結果是null或者undefined則會自動將其刪除不進行顯示
3.v-bind有一種簡寫模式 直接使用:即可代替 v-bind
4.也可以使用布林型別的 true false
5.動態繫結多個值:在陣列中新建一個物件,v-bind繫結一個物件的明成即可完成

Vue中的條件渲染
1.有四個指令 v-if v-else v-else-if v-show
v-if:條件性的渲染一塊內容 只在結果為真的時候才顯示
v-else:是不需要繫結其他內容的了
v-else-if:是用來判斷多個條件的 v-else-if可以多次使用
v-show:是按照條件進行顯示的

## v-if和v-show的區別

v-if適用於少次切換的
v-show 適用於頻繁切換的 改變的是class的屬性display

相關文章