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