列表渲染：
這裡開始渲染列表，arr是資料來源，item是被迭代的陣列元素的別名
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
head
>
<
body
>
<
div
id>
<
ul v-for
="item in arr"
>
<
li>}
li>
ul>
div>
<
script
src="vue.js"
>
script
>
<
script
>
=new
vue(
})script
>
body
>
html
>
v-for還支援第二個可選引數，既當前陣列的索引
下面是我們在課堂上做的乙個案例：
（用到了bootstrap的樣式，點這裡跳轉到bootstrap官網）
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
style
>
[v-cloak]
style
>
head
>
<
body
>
<
div
id:style
style
="margin: 0 auto"
v-cloak
>
<
div
v-if
="books.length"
>
<
h1 style
="text-align: center"
>圖書購物車
h1>
<
table
class
="table table-striped"
style
="border: 1px solid #eee"
>
<
thead
>
<
tr>
<
th>
th>
<
th>書籍名稱
th>
<
th>出版日期
th>
<
th>**
th>
<
th>購買數量
th>
<
th>操作
th>
tr>
thead
>
<
tbody
>
<
template
v-for
="(item,index) in books"
>
<
tr>
<
td>}
td>
<
td>}
td>
<
td>}
td>
<
td>￥}
td>
<
td>
<
button
type
="button"
class
="btn btn-default"
@click
="numberjian(index)"
:disabled
="item.number<=0"
>
-
button
>
}
<
button
type
="button"
class
="btn btn-default"
@click.stop
="numberjia(index)"
>
+button
>
td>
<
td>
<
button
type
="button"
class
="btn btn-default"
@click
="del(index)"
>
移除button
>
td>
tr>
template
>
tbody
>
table
>
總價為:￥}
div>
<
div
v-else style
="color:green;text-align: center"
>
<
h1>圖書購物車
h1>
<
h1>暫無商品
h1>
div>
div>
<
script
>
var=
newvue(,,]
}, methods: ,
numberjia(index) ,
numberjian(index)
}}, computed:
//for (let i = 0; i < this.books.length; i++)
for(let i of
this
.books)
return
result;}}
})script
>
body
>
<
link
rel="stylesheet"
href
="bootstrap.min.css"
>
<
script
src="vue.js"
>
script
>
html
>
Vue 迴圈遍歷 v for
如果在遍歷的過程中不需要使用索引值 如果在遍歷的過程中，我們需要拿到元素在陣列中的索引值呢？v for可以使用者遍歷物件 data 不能通過索引的方式更改陣列，這樣不會渲染頁面 不能通過更改長度的方式更改陣列，也不會渲染頁面 向物件內新增或者刪除屬性不會渲染頁面 使用 set 方法 object.d...
vue的迴圈遍歷，指令v for
1.迴圈遍歷 vue的迴圈遍歷用v for，語法類似於js中的for迴圈 當我們有一組資料需要進行渲染時，我們就可以使用v for來完成。2.v for使用格式 格式為 v for item in items 遍歷items中的資料 1.v for遍歷陣列 用v for指令基於乙個陣列來渲染乙個列表...
vue中v for遍歷select中預設選中的問題
廢話不多說，先看例項 以下先定義迴圈初始值 data 定義預設選中值 isselect true,定義select選中值 car 以下為select下拉框中迴圈資料 class configerselect change getcarmodel v model car selected issele...