2020 10 05 vue學習筆記 列表渲染

用v-for將乙個陣列渲染為列表

>

for=
"item in items"
>}}
<
/div>
//這裡的v-for塊中，能夠對父作用域進行訪問
<
/div>
var vm =
newvue(,
,,,,
]}})
;

v-for 還支援乙個可選的第二個引數，即當前項的索引。

>

for=
"(item,index) in items"
>
//1、這裡的index是v-for的第二個引數，即當前項的索引值
//2、這裡的in可以用of來代替}}
}<
/div>
<
/div>執行結果可以將索引值渲染上去：
//第二個引數為鍵名，第三個引數為索引值
}} is 
}<
/div>
<
/div>建立乙個nana的物件，用v-for進行渲染
var vm =
newvue(}});

,)接下來將列表中的資料傳給元件，利用v-bind來實現

>

for=
"item in items" v-bind:tiaomu=
"item.text"
>
<
/todo-item>
<
/div>在元件中要使用props來註冊乙個tiaomu
的屬性才能將列表資料傳入到元件裡
vue.

("todo-item",}

',props:

['tiaomu'],

})

var vm =

newvue(,
,,,,
]},}
)

注意：2.2.0+ 的版本裡，當在元件上使用 v-for 時，key 現在是必須的。

所以應該改進為：

>

for=
"(item,index) in items" v-bind:tiaomu=
"item.text"
:key=
"index"
>
<
/todo-item>
<
/div>在 v-for 裡使用值範圍
for=
"n in 10"
>
}<
/span>
<
/div>結果輸出1-10的數字
在
上使用v-for>
for=
"item in items"
>
}<
/li>
="divider"
>
<
/li>
<
/template>
<
/ul>
<
/div>

var vm = new vue(,,

, ]})

顯示過濾/排序後的結果

顯示乙個陣列中的偶數

>

for=
"num in even()"
>
}<
/div>
<
/div>
var vm =
newvue(,
computed:);
}},}
);

var vm =

newvue(,
methods:);
}}})
;

變更方法：(能夠被vue檢測到的陣列變更方法，會觸發檢視的更新)

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

替換陣列

不會變更原始陣列，而總是返回乙個新陣列。當使用非變更方法時，可以用新陣列替換舊陣列：

filter()

concat()

slice()

vue學習 筆記

v model 雙向繫結 v if v else if v else v on 繫結事件 v bind 繫結資料 v cloak 當vue未初始化完成前可不顯示為賦值的 vue屬性名稱 需要給v cloak設定 display none v for i迴圈次數 a資料中的資料 arr定義的陣列 最好...

vue學習筆記

vue學習筆記 從7月2日到7月4日三天的學習成果 一 vue的起步 及配置環境 3 使用vue cli快速搭建vue專案vue init webpack 為專案名 建立成功需要等待一段時間 4 輸入npm run dev編譯專案，成功後根據提示或根據修改的埠號登陸 lacalhost 5.看到下圖...

vue 學習筆記

1.v if v show區別 v if 是 真正 的條件渲染，因為它會確保在切換過程中條件塊內的事件 和子元件適當地被銷毀和重建。v if 也是惰性的 如果在初始渲染時條件為假，則什麼也不做 直到條件第一次變為真時，才會開始渲染條件塊。相比之下，v show 就簡單得多 不管初始條件是什麼，元素總...