Vue-004 v-for的使用入門
阿新 • • 發佈：2021-02-16
v-for的使用看官方介紹挺複雜的，但是如果拿來簡單用用還是一看就會的。
先來個簡單的
data
books:['三國演義','三國志','三國爭霸']div
<ul>
<li v-for="item in books">{{item}}</li>
</ul>顯示效果
"item in books"中的books是陣列名，in是固定的寫法，item可以隨便寫，在後面的插值中寫同樣的變數就行了。
再來個稍微複雜點的
data
books:[
{id:1,name:'三國演義',price:110},
{id:2,name:'四國演義',price:220},
{id:3,name:'五國演義',price:30},
{id:4,name:'六國演義',price:20},
{id:4,name:'七國演義',price:65}
]div
<ul> <li v-for="item in books">書名：{{item.name}} 價格：{{item.price}}</li> </ul>
顯示效果
數組裡是物件的話，item就表示一個物件,然後用item.name這樣的寫法就可以取裡物件裡面的引數
加個index屬性
div
<ul>
<li v-for="item,index in books">{{index + ' ' + item.name + ' ' + item.price}}</li>
</ul>如果物件沒有id之類的序號的話，可以加個index，預設表示陣列的下標
顯示效果如下
v-for入門是非常簡單的，一看就會
最後放一個完整的例子
複製就能開啟，不需要修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item,index in books">{{'序號：'+index + ' 書名： ' + item.name + ' 價格： ' + item.price}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
books:[
{id:1,name:'三國演義',price:110},
{id:2,name:'四國演義',price:220},
{id:3,name:'五國演義',price:30},
{id:4,name:'六國演義',price:20},
{id:4,name:'七國演義',price:65}
]
},
methods:{
},
computed:{
}
})
</script>
</body>
</html>顯示效果
