Vue入門第4天 模板語法 迴圈

2021-10-03 11:18:25 字數 1164 閱讀 3168

1.1 分支結構

v-if、 v-else、 v-else-if這三個使用的方法和js裡面的if 、else if、else的使用方法其實一樣的;v-show其實和v-show差不多。

1.2 v-if與v-show的區別

如果我們要讓乙個元素頻繁的顯示或隱藏,我們推薦用v-show;如果希望元素渲染出之後變化的比較少我們推薦用v-if。v-if其實是控制dom元素的,消耗效能比較大,我們最好還是使用v-show。

for=

"item in fruits"

>

}<

/li>

item是自己起的名字表示一項資料,後面}的值要和自己起的名字一樣,in是關鍵字, fruits對應的屬性名(你要遍歷的資料即fruits陣列)。

for=

"(item,index) in fruits"

>

}<

/li>

"item.id" v-

for=

"(item,index) in fruits"

>

}<

/li>

如果沒有id,則可以用索引

:key=『index』

for=

"(value,key,index) in obj"

>

}<

/div>

value、key、index的名字可以改變,但是它們3個的位置不能改變,這裡用插值表示式}來顯示輸出內容。

"value==13" v-

for=

"(value,key,index) in obj"

>

}<

/div>

當value值等於13時才會顯示value值,不滿足時不顯示

從現在開始vue模板語法完事了!!!

vue入門第一天,Vue模板

vue中文文件 webstorm 2018.2.3 老版本好破解,哈哈,提示也強悍,用hbuilderx基本上寫一小時 要改兩小時,vscode下了一堆外掛程式,提示還是一塌糊塗。暫時就靠這三個傢伙了搞定vue了。跟著動力節點的老杜學完了他講的html,css,js,jquery。都說vue簡單,但...

Android程式設計入門 第4天

今天開始學習第二章,開始接觸mvc設計模式。首先新建乙個question類,新增新的成員變數,並使用自動生成功能 生成getter和setter方法。具體 如下 package com.example.geoquiz public class question public void settext...

vue模板語法分支與迴圈

可以使用下面指令進行條件的判斷 通常在這些指令的後面會等於乙個判斷語句,就像下面一樣 90 優秀 80 良好 60 還行 拉跨可以在 vue 物件的 data 引數中宣告score變數,當score的值不同時,頁面中顯示的內容也不同。如下案例 class container v if score 9...