vue v-for迴圈中key屬性的使用

阿新 • • 發佈：2021-11-14

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">

    <div>
      <label>Id:
         
<input type="text" v-model="id">
      </label>

      <label>Name:
        <input type="text" v-model="name">
      </label>

      <input type="button" value="新增" @click="add">
    </div>

    <!-- 注意： v-for 迴圈的時候，key 屬性只能使用 number獲取string -->
    <!-- 注意： key 在使用的時候，必須使用 v-bind 屬性繫結的形式，指定 key 的值 -->
    <!-- 在元件中，使用v-for迴圈的時候，或者在一些特殊情況中，
                 如果 v 
-for 有問題，必須 在使用 v-for 的同時，指定 唯一的 字串/數字 型別 :key 值 -->
    <p v-for="item in list" :key="item.id">
      <input type="checkbox">{{item.id}} --- {{item.name}}
    </p>
  </div>

  <script>
    // 建立 Vue 例項，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        id:  
'',
        name: '',
        list: [
          { id: 1, name: '李斯' },
          { id: 2, name: '嬴政' },
          { id: 3, name: '趙高' },
          { id: 4, name: '韓非' },
          { id: 5, name: '荀子' }
        ]
      },
      methods: {
        add() { // 新增方法
          this.list.unshift({ id: this.id, name: this.name })
        }
      }
    });
  </script>
</body>

</html>

本文來自學習小花，作者：aixuexi666888，轉載請註明原文連結：https://www.cnblogs.com/aixuexi666888/p/15551121.html

vue v-for迴圈中key屬性的使用

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">

Vue在v-for迴圈中動態載入相對路徑圖片，Error: Cannot find module ‘xxx‘的問題

技術標籤：技術開發Vue.jsvue Vue在v-for迴圈中動態載入相對路徑圖片，Error: Cannot find module \'xxx’的問題；通過v-for來迴圈圖片（圖片是在當前專案內-相對路徑）

vue v-for迴圈列表，點選顯示隱藏

css： .listTitle{width: 7.5rem;height: 1rem;margin: auto;display: flex;align-items: center;justify-content: space-between;border-bottom: 1px solid #eee;}

v-for迴圈中使用require/import關鍵字引入本地圖片的幾種方式

目錄問題描述方式一（後端返回圖片URL）方式二（前端使用require）方式三（前端使用import）總結問題描述

async 、await 、Promise 學習記錄、在vue 的for迴圈中實現同步呼叫介面

async 、await 、Promise 學習記錄知識點 //執行async 函式，返回的都是Promise 物件 async function test1() {

編寫 Vue v-for 迴圈的 7 種方式

目錄1. 始終在v-for迴圈中使用key2. 在一定範圍內使用v-for迴圈3. 避免在迴圈中使用v-if4. 使用computed屬性或方法5. 或者在迴圈外包一層元素6. 訪問迴圈中的索引7. 迭代物件這在碰到諸如以下情況時特別好用：

vue v-for迴圈的用法

1、v-for迴圈普通陣列 <1>建立vue物件 <script> //建立 Vue例項，得到ViewMode1

vue中 v-for迴圈的用法詳解

1、v-for迴圈普通陣列 ①建立vue物件 ② 迴圈資料結果： 2、v-for迴圈物件陣列 ① 建立vue例項物件

vue中v-for迴圈選中點選的元素並對該元素新增樣式操作

相信大家都會遇到這種情況：v-for迴圈時，我只需要點選到的元素做出相應反應，其他的元素不變；但是往往所有v-for迴圈出的元素都會變化。如下面的程式碼：我需要點選到的元素新增一個類樣式，其他元素不變，但是這樣

v-for中key屬性的作用

key 當 Vue.js 用v-for正在更新已渲染過的元素列表時，它預設用“就地複用”策略。如果資料項的順序被改變，Vue 將不會移動 DOM 元素來匹配資料項的順序，而是簡單複用此處每個元素，並且確保它在特定

vue選項卡，v-for迴圈資料列表，初始迴圈中的第一個為選中狀態class，點選改變class

css： .recharge_box{display: flex;padding: 0.1rem 0.1rem;justify-content: space-between;} .recharge{width: 2rem;height: 1rem;text-align: center;line-height: 1rem; border: 1px solid #eee;border-radiu