VueJS----[內部指令-1.3]----v-for指令：解決模板迴圈問題

阿新 • • 發佈：2019-01-18

v-for指令：解決模板迴圈問題

v-for指令是迴圈渲染一組data中的陣列，v-for 指令需要以 item in items 形式的特殊語法，items 是源資料陣列並且item是陣列元素迭代的別名。

基本語法：

<li v-for="item in items">
  {{item}}
</li>

js寫法：

var app=new Vue({
     el:'#app',
     data:{
         items:[12,2,6,4,24,6,56]
     }
})

這是一個最基礎的迴圈，先在js裡定義了items陣列，然後在模板中用v-for迴圈出來，需要注意的是，需要哪個html標籤迴圈，v-for就寫在那個上邊。

排序：

當我們需要對顯示的資料進行排序時，可以用到Vue的compueted屬性

computed:{
    sortItems:function(){
          return this.items.sort();
    }
}

我們要在computed中聲名一個物件sotrItems,如果不聲名，會報錯，這時要將迴圈的那個資料改成排序後的sotrItems陣列。

到這，如果一切順利的話，會看到結果，但是還有一個小bug，當我們把陣列中的值隨便改一個，排序結果會吧修改後的那個數值放在最後，很顯然不是我們想要的，因此需要寫一個方法sortNumber來解決這個bug。

function sortNumber(a,b){
   return a-b
}

用法：

computed:{
    sortItems:function(){
    return this.items.sort(sortNumber);
    }
 }

現在這個排序是ok的。

物件迴圈輸出

我們在做專案的時候經常會將物件陣列進行遍歷，那麼我們就先看一下是如何進行遍歷的。
1.先定義一個數組，數組裡是物件資料

students:[
 {name:'Cheny',age:21},
 {name:'Boom',age:19},
 {name:'ChenDaYong' 
,age:17},
 {name:'Chen',age:16}
]

在模板中輸出：

<ul>
<li v-for="stu in students">
({{index}}:){{stu.name}},{{stu.age}}
</li>
</ul>

也可以加入索引

<ul>
    <li v-for="(stu,index) in sortStudents">
        ({{index}}:){{stu.name}},{{stu.age}}
    </li>
</ul>

完整程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-for</h1>
    <div id="app">
        <ul>
            <li v-for="item in sortItems">
                {{item}}
            </li>
        </ul>
        <ul>
            <li v-for="(stu,index) in sortStudents">
                ({{index}}:){{stu.name}},{{stu.age}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                items:[12,2,6,4,24,6,56],
                students:[
                    {name:'Cheny',age:21},
                    {name:'Boom',age:19},
                    {name:'ChenDaYong',age:17},
                    {name:'Chen',age:16}
                ]
            },
            computed:{
                sortItems:function(){
                    return this.items.sort(sortNumbers);
                },
                sortStudents:function(){
                    return sortByKey(this.students,'age');
                }
            }
        });
        function sortNumbers(a,b){
            return a-b;
        }
        //陣列物件的排序方法
        function sortByKey(array,key){
            return array.sort(function(a,b){
                var x=a[key];
                var y=b[key];
                return ((x<y)?-1:((x>y)?1:0));
            });
        }
    </script>
</body>
</html>

VueJS----[內部指令-1.3]----v-for指令：解決模板迴圈問題

v-for指令：解決模板迴圈問題 v-for指令是迴圈渲染一組data中的陣列，v-for 指令需要以 item in items 形式的特殊語法，items 是源資料陣列並且item是陣列元素迭代的別名。基本語法： <li v-for=

1.4 Vue v-if,v-show與v-for指令

v-if,v-show與v-for <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-if,v-show與v-for指令</title>

Vue:v-for指令

-1 color ges png lan img ood utf food <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

VUE指令-列表渲染v-for

center 20px lod 關聯 width utf-8 狀態 onclick -v-if v-for 指令根據一組數組的選項列表進行渲染。v-for 指令需要使用 item in items 形式的特殊語法，items 是源數據數組並且 item 是數組元素叠代的別名

v-for指令

title log post pre name sco lang src lan <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

v-for 指令

AC title item alt log doctype 列表圖片 rip v-for 指令可以綁定數組的數據來渲染一個項目列表 demo <!DOCTYPE html> <html lang="en"> <head> &l

Vue學習（五）——v-if,v-show,v-for指令

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-if,v-show,v-for指令</title> <script

16.VUE學習之- v-for指令的使用方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist

Vs Code在Vue專案中v-for指令提示錯誤的解決辦法

最近在做一個Vue專案，在其中用到v-for指令時，發現Vs Code報錯，如下圖（程式碼是沒有任何問題的），在網上找了一下解決辦法，希望能幫助到更多人。解決方法：開啟檔案-首選項-設定將如下程

Vue中v-for指令中的key遇到的問題

v-for 給了兩個引數key和index，但是這裡需要對遍歷的資料區別對待。遍歷的資料包括陣列和物件，但是在陣列下是沒有key值的，而在物件下可以得到key，可以顯示出來<divid="app"> <ul> <

vue v-for指令

<div id="app4"> <ol> <ul> <li v-for="zhi_es

Vue中的v-for指令不起效果

我的程式碼之前類似下面的結構 <div id="example-1" v-for="item in items"> <ul> <li> {{ item.message }}

Vue2.5入門——v-if，v-show與v-for指令

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

使用v-for指令渲染列表

div 遍歷 charset ide style title none 遍歷數組 code v-for：對集合或對象進行遍歷；使用v-for對數組遍歷時：效果如下：代碼： <script> window.on

Atitit 程式設計序列化技術點概念原理v2 1. 序列化： 1 2. 序列化的目的 1 2.1. 為了傳輸或者儲存 1 3. 應用場合 1 3.1. Form提交url 1 3.2. For

Atitit 程式設計序列化技術點概念原理v2 1. 序列化： 1 2. 序列化的目的 1 2.1. 為了傳輸或者儲存 1 3. 應用場合 1 3.1. Form提交url 1 3.2. Form提交為 json物件，適合後端物件解析 1

vue——3-v-for

<div id="enjoy">   <p v-for

VueJS的使用-如何在v-for迴圈中輸出值給標籤的屬性

最近在學習使用VueJS，在學習的過程中，遇到一個問題：如何給標籤中的屬性進行賦值，如：input標籤的value，在迴圈輸入的過程，可以直接使用:value，如以下程式碼： <!DOCTYPE html> <html lang="en"&

單指令週期CPU---算術操作指令(1)---簡單算術操作指令的實現

程式碼放在github上在之前實現的基礎上繼續增加了15條簡單算術操作指令（add、addi、addiu、addu、sub、subu、clo、clz、slt、slti、sltiu、sltu、mul、mult、multu）之前操作的傳送門：單指令週期o

Vuejs（14）——在v-for中，利用index來對第一項新增class

<aclass="list-group-item":class="{'active':!index}"v-for="(i,index) in announcement"> index來源於v-for，i表示遍歷的陣列的元素，index表示索引。由於index從0開始，因此如果要

C#復習筆記（3）--C#2：解決C#1的問題（進入快速通道的委托）

包含問題道理一次簡化 linq base 啟動外部委托前言：C#1中就已經有了委托的概念，但是其繁雜的用法並沒有引起開發者太多的關註，在C#2中，進行了一些編譯器上的優化，可以用匿名方法來創建一個委托。同時，還支持的方法組和委托的轉換。順便的，C#2中增加了委

VueJS----[內部指令-1.3]----v-for指令 ：解決模板迴圈問題

v-for指令 ：解決模板迴圈問題

基本語法：

排序：

物件迴圈輸出

相關推薦

VueJS----[內部指令-1.3]----v-for指令：解決模板迴圈問題

v-for指令：解決模板迴圈問題