文章來源：http://www.zghlxwxcb.cn/news/detail-655508.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(user,index) in users" :key="user.name" v-if="user.gender == '女'">
<!-- 1、顯示user信息：v-for="item in items" -->
當(dāng)前索引：{{index}} ==> {{user.name}} ==> {{user.gender}} ==>{{user.age}} <br>
<!-- 2、獲取數(shù)組下標(biāo)：v-for="(item,index) in items" -->
<!-- 3、遍歷對象：
v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
-->
對象信息：
<span v-for="(v,k,i) in user">{{k}}=={{v}}=={{i}}；</span>
<!-- 4、遍歷的時候都加上:key來區(qū)分不同數(shù)據(jù)，提高vue渲染效率 -->
</li>
</ul>
<ul>
<li v-for="(num,index) in nums" :key="index"></li>
<li style="color:red" v-for="(item,index) in nums">{{item}} -- {{index}}</li>
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script> ????????
let app = new Vue({
el: "#app",
data: {
users: [{ name: '柳巖', gender: '女', age: 21 },
{ name: '張三', gender: '男', age: 18 },
{ name: '范冰冰', gender: '女', age: 24 },
{ name: '劉亦菲', gender: '女', age: 18 },
{ name: '古力娜扎', gender: '女', age: 25 }],
nums: [1,2,3,4,4]
},
})
</script>
</body>
</html>
文章來源地址http://www.zghlxwxcb.cn/news/detail-655508.html
到了這里，關(guān)于GuLi商城-前端基礎(chǔ)Vue指令v-for的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
