Vue基礎學習（一）------內部指令

一.v-if? v-else? v-show 指令

1.v-if

? ?v-if:是vue 的一個內部指令，指令用在我們的html中,用來判斷是否加載html的DOM

? ?現在舉個栗子，判斷用戶的登錄操作，用isLogin作為一個判斷字段，登錄成功，就顯示用戶的名稱

? 代碼：

??

? 效果如下：

??

2.v-show

? ?v-show:調整css中display屬性，DOM已經加載，只是CSS控制沒有顯示出來。

? ?舉個栗子：

? ?

? ?v-show和v-if區別:

? ?v-if： 判斷是否加載，可以減輕服務器的壓力，在需要時加載。

? ?v-show：調整css dispaly屬性，可以使客戶端操作更加流暢。

3.v-for

? ?v-for指令是循環渲染一組data中的數組，v-for 指令需要以 item in items 形式的特殊語法，items 是源數據數組并且item是數組元素迭代的別名。

? ?直接貼代碼：

? ?

? ?

? ?效果：

??

4.v-text & v-html

? ?我們已經會在html中輸出data中的值了，我們已經用的是{{xxx}},這種情況是有弊端的，就是當我們網速很慢或者javascript出錯時，會暴露我們的{{xxx}}。Vue給我們提供的v-text,就是解決這個問題的

? ?雙大括號會將數據解釋為純文本，而非HTML。為了輸出真正的HTML，你就需要使用v-html 指令。

? ?需要注意的是：在生產環境中動態渲染HTML是非常危險的，因為容易導致XSS攻擊。所以只能在可信的內容上使用v-html，永遠不要在用戶提交和可操作的網頁上使用。

? ?

?