這一節我們來講條件渲染，單獨講解條件渲染可能比較單調和簡單，這裡我添加了v-for的組合使用。
條件渲染主要有v-if，v-else-if,v-else,v-show。
v-if後面接的表達式需要指明結果是真還是假，當條件為真時渲染v-if所在標籤的內容，當條件為假是不渲染v-if所在標籤的內容。
v-else-if後面接的表達式指明結果為真還是假，當條件為真時渲染v-else-if所在標籤的內容，當條件為假是不渲染v-else-if所在標籤的內容。
v-else是當上述的條件都不成立時，渲染v-else標籤內的內容。
v-show後面接的表達式需要指明結果為真還是假，當結果為真時顯示v-show所在標籤內的內容，當為假時隱藏v-show所在標籤內的內容。
v-for可以批量的處理一些數據上具有相同結構的數據。
概念上的東西先將這多，來點乾貨讓大家感受一下。
<title>Vue/<title>
id is {{item.id}}
程序設計
（1）數據結構data為人的信息，有ID號，名字，性別，年齡，信息是否隱藏這些組成。
（2）設計使用v-for遍歷人員信息數組，當人員信息的hide屬性為true時隱藏這個人的信息，如果為false顯示這個人的信息，
顯示人員信息的id，name,age，根據人員信息的sex屬性值為male顯示單選按鈕，當屬性值為female時顯示覆選按鈕，為其他值時顯示按鈕。
結果
從圖中可以看到顯示的結果和設計的結果一致，同時在DOM結構中看到v-show部分的顯示狀態為none而不是沒有渲染。
v-for結合這些條件渲染可對數據結構具有相似性的數據進行渲染節省代碼在項目中具有很強的抽象性。
分享到:
閱讀更多 kuikui 的文章
