Vue條件判斷之循環(huán)舉例詳解
1 條件判斷v-if、v-else-if、v-else
1.1 簡介
- 在Vue中，
v-if、v-else-if、v-else是用于條件渲染的指令。 - 它們根據(jù)表達(dá)式的真假值來有條件地渲染元素。
- 這些指令對于控制頁面上不同內(nèi)容的顯示非常有用，特別是在需要根據(jù)數(shù)據(jù)動態(tài)顯示不同視圖時。
v-if：根據(jù)表達(dá)式的真假值來條件性地渲染元素。v-else-if：作為v-if的“else if”塊，用于檢查多個條件。v-else：為v-if/v-else-if提供“else”塊，當(dāng)所有前面的條件都不滿足時渲染。
1.2使用
1、v-if
v-if 指令用于條件性地渲染一塊內(nèi)容。這塊內(nèi)容只會在指令的表達(dá)式返回真值(truthy value)時渲染。
示例：
<template>
<div>
<p v-if="score >= 90">優(yōu)秀</p>
<p v-else-if="score >= 60">及格</p>
<p v-else>不及格</p>
</div>
</template>
<script>
export default {
data() {
return {
score: 85 // 假設(shè)這是學(xué)生的分?jǐn)?shù)
}
}
}
</script>2、v-else-if
v-else-if，顧名思義，用作v-if的“else if”塊。你可以鏈?zhǔn)降厥褂枚鄠€v-else-if來檢查多個條件。
注意：v-else-if和v-else必須緊跟在v-if或v-else-if元素之后，否則它們將不會被識別。
3、v-else
v-else指令為v-if、v-else-if提供“else”塊。v-else元素會渲染出來，如果前面的v-if和v-else-if條件都不滿足。
2 循環(huán)v-for
2.1 簡介
- Vue.js 中的
v-for指令用于基于一個數(shù)組或?qū)ο髞礓秩疽粋€列表。 - 它可以使用在
<template>、<div>、<span>或其他任何元素上，并且可以重復(fù)渲染該元素或模板塊多次。 v-for指令需要一個表達(dá)式，該表達(dá)式聲明了如何遍歷數(shù)組或?qū)ο蟆?/li>
2.2基本語法
對于數(shù)組：
items 是要遍歷的數(shù)組，item 是數(shù)組元素的一個別名（可以使用任何名稱），index 是當(dāng)前元素的索引（也是可選的）。:key="index" 是一個好的實(shí)踐，用于給每個循環(huán)的元素提供一個唯一的 key，以幫助 Vue 跟蹤每個節(jié)點(diǎn)的身份，從而重用和重新排序現(xiàn)有元素。
<div v-for="(item, index) in items" :key="index">
{{ item.text }}
</div>對于對象：
這里，object 是要遍歷的對象，value 是對象的屬性值，key 是對象的鍵名。
<div v-for="(value, key) in object" :key="key">
{{ key }}: {{ value }}
</div>附：注意事項
v-for使用過程最好為元素添加key，且key值與元素是一一對應(yīng)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li class="li" v-for="item in language" :key="item">{{item}}</li>
</ul>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
language: ["c", "c++", "python", "java"],
},
});
</script>
</html>總結(jié)
到此這篇關(guān)于Vue條件判斷之循環(huán)舉例詳解的文章就介紹到這了,更多相關(guān)Vue條件判斷循環(huán)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
element-ui配合node實(shí)現(xiàn)自定義上傳文件方式
這篇文章主要介紹了element-ui配合node實(shí)現(xiàn)自定義上傳文件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue修改Dom不生效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了前端導(dǎo)出PDF方案,通過html2canvas和jsPDF實(shí)現(xiàn)單頁導(dǎo)出,利用iframe分批處理列表頁數(shù)據(jù)并打包ZIP,兼顧性能與樣式還原,有效減輕服務(wù)端壓力,需要的朋友可以參考下2025-07-07
element plus el-table多選框跨頁多選保留功能
這篇文章主要介紹了element plus el-table多選框跨頁多選保留功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2025-05-05
Vue.js實(shí)現(xiàn)簡單動態(tài)數(shù)據(jù)處理
本篇文章主要介紹了Vue.js實(shí)現(xiàn)簡單動態(tài)數(shù)據(jù)處理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了vue如何使用AIlabel標(biāo)注組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue中利用Promise封裝jsonp并調(diào)取數(shù)據(jù)
Promise就是一個給一步操作提供的容器，在這個容器里，有兩個階段無法改變的階段，這兩個階段在文中給大家提到。對vue中利用Promise封裝jsonp并調(diào)取數(shù)據(jù) 的相關(guān)知識感興趣的朋友，跟隨小編一起看看吧2019-06-06
文章詳細(xì)介紹了如何將Vue項目從本地環(huán)境部署到線上服務(wù)器,包括打包本地項目、服務(wù)器環(huán)境搭建、項目上傳與配置以及解決部署后頁面訪問異常問題2026-02-02
這篇文章主要介紹了解決vue 局部過濾器獲取不到this的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
vue 的點(diǎn)擊事件獲取當(dāng)前點(diǎn)擊的元素方法
今天小編就為大家分享一篇vue 的點(diǎn)擊事件獲取當(dāng)前點(diǎn)擊的元素方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09