**
新學習新征程，我們一起踏上學習 vue.js的新長征
遇見 vue.js --------阿文的vue.js學習筆記（1）-----初識vue.js
遇見 vue.js --------阿文的vue.js學習筆記（2—1）----- 基本使用 [1]
遇見 vue.js --------阿文的vue.js學習筆記（2—2）----- 基本使用 [2]
… … …
遇見 vue.js --------阿文的vue.js學習筆記(目錄)
關注我，我們一起學習進步，
**
1、v-for 渲染陣列 串列
當我們需要將一個陣列來渲染出去的時候 ，通常用到的就是我們 v-for 指令.
簡單示例：
我們 在使用
v-for指令的時候，需要使用 item in items 形式的特殊語法，其中 items 是源資料陣列，而 item 則是被迭代的陣列元素的別名，
在 我們的 v-for 塊中，我們可以訪問所有父作用域 的 屬性（property），
簡單示例： 你可以發現我們的父元素，會被添加在每一個陣列資料的后面
補充：
我們的v-for還支持一個可選的第二個引數，這第二個引數表示 當前項的索引，（索引從0開始）
簡單示例：
第二個引數可以用任意的 字母 來代表 ，但是 由于 index 的中文意思就是 索引的 意思，所以一般大多數情況，我們都會用 index 來 寫作第二個引數 ；由于我們的 索引都是從零開始的 ，假如我們需要計數從1 開始 那就在后面渲染的時候，寫作
{{index+1}}
2、v-for 渲染物件
當然 v-for 也可以來遍歷一個物件的所有 property，也可以將其渲染進我們的 dom
它還可以添加兩個引數：第二個是屬性的 鍵名 （一般用 key 來表示），第三個引數 作為屬性的 索引 （索引從 零開始 ，一般 呼叫 index 來表示）
3、在組件中 使用 v-for
我們先來看一個 例子：先寫一個組件做一個按鈕，然后進行v-for 渲染下面的 陣列你可以發現 陣列的屬性有幾個，我們的按鈕也同樣被渲染了 和屬性相同的個數
但是這樣不能區分我們的四個按鈕 分別代表的是哪個，所以我們需要添加屬性
當然直接寫 v-for 這樣也是可以的 ，并且這里的 10 并不來自我們 data 而是來自我們的本身
同樣，假如我們創建了 一個樣式，需要呈現多個相同的樣式渲染進我們 頁面，也是可以這樣寫的：
4、v-for 和 template 連用
當然和
v-if類似，我們也可以利用帶有v-for的<template>來回圈渲染一段包含多個元素的內容.
簡單示例： 回圈渲染一個 陣列，但是每個資料下還需要跟著回圈一根下劃線，代碼如下：
5、顯示過濾 / 排序 后的結果
上圖是一個陣列，然后將其回圈渲染進我們的頁面的，假如我們不想將所有的資料都渲染進來，我們想要的是顯示一個陣列經過 過濾 或 排序 后的版本，而不實際變更或重置原始資料，在這種情況下，我們可以創建一個計算屬性，來回傳過濾或排序后的陣列，
簡單示例：可以看出我們經過篩選，只渲染了 陣列中能整除2 的資料（也就是偶數）
了解：
Filter：web中的 過濾器，當訪問服務器的資源時，過濾器可以將請求攔截下來，完成一些特殊的功能 （ 一般用于完成通過的操作，如：統一編碼處理、敏感字符過濾等）
當然上面的這個例子也是可以通過 添加 v-if 來完成的：
當然這里用我們前面學的 method 方法也是可以的，
**
關注 校園君有話說 公眾號 ，回復 web前端 免費領取50G 前端學習資料 一份 ，我們一起學習進步吧，
**
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/153292.html
標籤：其他
下一篇：ssm整合shiro詳解