programlearned
  • Introduction
  • js 筆記
    • Hammer.js 應用
  • node 筆記
    • 安裝與開始
    • exports 的應用
    • http 模組知識
    • Express 開始
      • 載入靜態檔案(image,css,js)
      • ejs 的使用
      • ejs layout的使用
      • ejs include的使用
      • ejs-form 的使用
      • ejs-ajax 的使用
      • route 的整理使用
    • 參考資料
  • vue 筆記
    • 安裝與開始
    • 基礎知識
      • 創建vue與輸出
      • v-bind 綁訂應用
      • v-for 與 v-if
      • v-on
      • v-class
      • 計算功能函數
      • 表單資料綁定
      • TodoList製作
    • 參考資料
  • Bootstrap 筆記
    • 相關資源網站
    • 安裝與開始
    • CSS 基礎知識
    • 容器container 應用
    • 網格系統 應用
      • 斷點
      • 版本斷點比較
      • 欄位排序
      • 欄位推移
      • 巢狀欄位
      • Flexbox 方向性
    • 間隔工具
    • 按鈕(button)
    • 不同的呈現(display)方式
    • 容器對齊方式
    • 文字(背景顏色)對齊與樣式
    • 導覽列應用
    • 參考資源
  • gitbook 製作與離線版
Powered by GitBook
On this page

Was this helpful?

  1. vue 筆記
  2. 基礎知識

v-for 與 v-if

應用範例

  • v-if

    • 寫法:v-if="條件判斷式"

  • v-for(會重複把此標籤內的所有+自己進行迴圈)

    • 1.寫法:v-for="個 in 群"

    • 2.寫法:v-for="(個,引數(第幾個)) in 群"

<div id="app">
    <pre>{{list}}</pre>
    <ul>
        <li v-for="(item,index) in list" v-if="item.age <=25">
            {{index}} - {{item.name}} 年齡是{{item.age}}歲
        </li>
    </ul>  
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    list: [
      {
        name: '小明',
        age: 16
      },
      {
        name: '媽媽',
        age: 38,
      },
      {
        name: '漂亮阿姨',
        age: 24
      }
    ]
  }
})
</script>
Previousv-bind 綁訂應用Nextv-on

Last updated 6 years ago

Was this helpful?