欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue條件判斷之循環(huán)舉例詳解

 更新時(shí)間：2024年07月25日 09:50:45   作者：泡芙冰淇淋ya  
在Vue進(jìn)行前端開發(fā)中,條件判斷主要用于根據(jù)不同的條件來決定顯示或隱藏,或者進(jìn)行視圖之間的切換,這篇文章主要給大家介紹了關(guān)于Vue條件判斷之循環(huán)舉例詳解的相關(guān)資料,需要的朋友可以參考下

1 條件判斷v-if、v-else-if、v-else

1.1 簡介

  • 在Vue中，v-if、v-else-if、v-else 是用于條件渲染的指令。
  • 它們根據(jù)表達(dá)式的真假值來有條件地渲染元素。
  • 這些指令對(duì)于控制頁面上不同內(nèi)容的顯示非常有用，特別是在需要根據(jù)數(shù)據(jù)動(dòng)態(tài)顯示不同視圖時(shí)。
  • v-if：根據(jù)表達(dá)式的真假值來?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來檢查多個(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ì)渲染出來，如果前面的v-if和v-else-if條件都不滿足。

2 循環(huán)v-for

2.1 簡介

  • Vue.js 中的 v-for 指令用于基于一個(gè)數(shù)組或?qū)ο髞礓秩疽粋€(gè)列表。
  • 它可以使用在 <template>、<div>、<span> 或其他任何元素上，并且可以重復(fù)渲染該元素或模板塊多次。
  • v-for 指令需要一個(gè)表達(dá)式，該表達(dá)式聲明了如何遍歷數(shù)組或?qū)ο蟆?/li>

2.2基本語法

對(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使用過程最好為元素添加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)文章

最新評(píng)論