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

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

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

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

1.1 簡介

  • 在Vue中，v-if、v-else-if、v-else 是用于條件渲染的指令。
  • 它們根據(jù)表達式的真假值來有條件地渲染元素。
  • 這些指令對于控制頁面上不同內(nèi)容的顯示非常有用，特別是在需要根據(jù)數(shù)據(jù)動態(tài)顯示不同視圖時。
  • v-if：根據(jù)表達式的真假值來條件性地渲染元素。
  • v-else-if：作為v-if的“else if”塊，用于檢查多個條件。
  • v-else：為v-if/v-else-if提供“else”塊，當所有前面的條件都不滿足時渲染。

1.2使用

1、v-if

v-if 指令用于條件性地渲染一塊內(nèi)容。這塊內(nèi)容只會在指令的表達式返回真值(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ù)  
    }  
  }  
}  
</script>

2、v-else-if

v-else-if，顧名思義，用作v-if的“else if”塊。你可以鏈式地使用多個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ù)組或對象來渲染一個列表。
  • 它可以使用在 <template>、<div>、<span> 或其他任何元素上，并且可以重復渲染該元素或模板塊多次。
  • v-for 指令需要一個表達式，該表達式聲明了如何遍歷數(shù)組或對象。

2.2基本語法

對于數(shù)組：

items 是要遍歷的數(shù)組，item 是數(shù)組元素的一個別名（可以使用任何名稱），index 是當前元素的索引（也是可選的）。:key="index" 是一個好的實踐，用于給每個循環(huán)的元素提供一個唯一的 key，以幫助 Vue 跟蹤每個節(jié)點的身份，從而重用和重新排序現(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值與元素是一一對應

<!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>

總結 

到此這篇關于Vue條件判斷之循環(huán)舉例詳解的文章就介紹到這了,更多相關Vue條件判斷循環(huán)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論