[[382923]]

一、什么是Vue.js?

Vue 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時，Vue 也完全能夠為復(fù)雜的單頁應(yīng)用提供驅(qū)動。

前面幾天我們已經(jīng)分享了Vue的學(xué)習(xí)筆記(中篇)和Vue的學(xué)習(xí)筆記(上篇)，今天我們一起來看看下篇。

二、Vue的v-for循環(huán)

(一)v-for循環(huán)普通數(shù)組

1.在data中定義普通數(shù)組;

data(){ 
return{ 
list: [1, 2, 3, 4, 5] 
} 
} 

2.在html中使用v-for指令渲染;

<p v-for="(item, i) in list">索引值是：{{i}} --- 每一項的值是：{{item}}</p> 

3.效果圖如下圖：

(二)v-for循環(huán)對象數(shù)組

1.在data 中定義對象數(shù)組;

data(){ 
return{ 
        list: [ 
  { id: 1, name: 'zhan1' }, 
  { id: 2, name: 'zhan2' }, 
  { id: 3, name: 'zhan3' }, 
  { id: 4, name: 'zhan4' } 
] 
} 
} 

2.在html中使用v-for指令渲染：

<p v-for="(user, i) in list">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引值是：{{i}}</p> 

 3.效果圖如下圖：

(三)v-for循環(huán)對象，在遍歷對象的身上的鍵值對時候，除了有val、key,在第三個位置還有一個索引值。

1.在data定義一個對象;

data(){ 
return{ 
user: { 
        id: 1, 
        name: 'zhan', 
        gender: '男' 
   } 
} 
} 

2.在html中使用v-for指令渲染：

<p v-for="(val, key, i) in user">值是：{{ val }} --- 鍵是：{{key}} -- 索引值是：{{i}}</p> 

 3.效果圖如下圖：

(四)v-for迭代數(shù)字 ###在in后面我們放過普通數(shù)組、對象數(shù)組、對象，還可以放數(shù)字，如果使用v-for迭代數(shù)字的時候，前面的count值的從1開始。

1.在html中使用v-for指令渲染：

<p v-for="count in 5">這是第 {{ count }} 次循環(huán)</p> 

 2.效果圖如下圖：

(五)v-for循環(huán)中key屬性的使用

v-for 循環(huán)的時候，key 屬性只能使用number獲取string,在key使用的時候，必須使用v-bind屬性綁定的形式，指定key的值，在組件中，使用v-for循環(huán)的時候，如果有v-for的同時，指定唯一的字符串/數(shù)字類型：key的值。

1.在data 中定義對象數(shù)組;

data(){ 
return{ 
        list: [ 
  { id: 1, name: 'zhan1' }, 
  { id: 2, name: 'zhan2' }, 
  { id: 3, name: 'zhan3' }, 
  { id: 4, name: 'zhan4' } 
] 
} 
} 

2.在html中使用v-for指令渲染代碼如下圖：

3.效果圖如下圖：

三、Vue過濾器的基本使用

1.首先定義一個 Vue 全局的過濾器，名字叫做msgFormat，字符串的replace方法的第一個參數(shù)，除了可以寫一個字符串之外，還可以定義一個正則。

2.在js的代碼中，如以下代碼：

Vue.filter('msgFormat', function (msg, arg, arg2) { 
  return msg.replace(/day/g, arg + arg2) 
}) 
 
Vue.filter('test', function (msg) { 
  return msg + '========' 
}) 

3.在html代碼中，如以下代碼：

<p>{{ msg | msgFormat('我', '123') | test }}</p> 

4.在data中，定義一個msg:

data(){ 
return{ 
msg:'the day is cloudless' 
} 
} 

5.效果圖如下圖：

四、總結(jié)

1.vue中的v-for循環(huán)有普通數(shù)組、對象數(shù)組、對象、迭代數(shù)字、key屬性的使用，這些用法的詳解，希望對大家有所幫助。

2.vue過濾器的基本使用局部過濾器優(yōu)先于全局過濾器被調(diào)用，一個表達(dá)式可以使用多個過濾器，過濾器之間需要用管道符“|”隔開，其執(zhí)行順序從左往右。

本文轉(zhuǎn)載自微信公眾號「IT共享之家」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系IT共享之家公眾號。