vue循环遍历List,Map,Array
1、list :
v-for循环对象数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="../js/vue.js"></script>
<body>
<div id="app">
<!-- 不一定非用item， 可以换 -->
<p v-for="user in list">{{ user.id }} --- {{user.name}}</p>
=======================================================================
<p v-for="(user,i) in list">Id:{{user.id}} --- name:{{user.name}} --- 索引:{{i}}</p>
</div>
</body>
</html>
<script>
var vm = new Vue({
el:'#app',
data:{
list:[
{id:1,name:'aa'},
{id:2,name:'bb'},
{id:3,name:'cc'},
{id:4,name:"dd"}
]
},
methods:{}
})
</script>
v-for循环普通数组:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <script src="../js/vue.js"></script> <body> <div id="app"> <p>{{ list }}</p> <p v-for="item in list">{{ item }}</p> <p v-for="(item,i) in list"> 索引值:{{ i }} --- 每一项:{{ item }}</p> </div> </body> </html> <script> var vm = new Vue({ el:'#app', data:{ list:[1,2,3,4,5,6] }, methods:{ } }) </script>
2、Map:
下列代码展现的是一种比较复杂的情况，在 Map 的 value 中存放的是一个 List 。
<ul v-for="(value, key) in questions" :key="key">
<li>{{key}}</li>
<ul v-for="val in value" :key="val.hexId">
<li>{{val.name}}</li>
</ul>
</ul>
一般 js for in 是遍历 key， 而 for of 遍历 value。 在 vue 里面应该没区别，用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法。
3、Array：
(1) array里面是一个list
<div v-for="(item, index) in fromData['answerList']" :key="index" style="margin-bottom: 20px;">
<el-row :gutter="6">
<el-col :span="4">
<el-form-item prop="tqaFlag"><el-input type="text" placeholder="选项" clearable v-model="item.tqaFlag"></el-input></el-form-item>
</el-col>
<el-col :span="9">
<el-form-item prop="tqaContent"><el-input type="text" placeholder="请输入0~50个字符内的答案" clearable v-model="item.tqaContent"></el-input></el-form-item>
</el-col>
<el-col :span="3">
<el-form-item prop="tqaScore"><el-input type="text" placeholder="请输入选项分值" clearable v-model="item.tqaScore"></el-input></el-form-item>
</el-col>
<el-col :span="4">
<el-form-item prop="tqaRight">
<el-link v-if="item.tqaRight == '0'" :underline="false"> </el-link>
<el-link v-if="item.tqaRight == '1'" :underline="false"><i style="color: green;" class="el-icon-check"></i></el-link>
<el-link @click="removetqiAnswer(index)" :underline="false"><i style="color: red;" class="el-icon-close"></i></el-link>
</el-form-item>
</el-col>
</el-row>
</div>
data () {
return {
fromData: {
answerList: []
},
}
}
code: 100,
data: { answer: [{tqaScore: 4, tqaContent: "冰毒", tqaRight: 0, tqaFlag: "A"},…]
}
data: {
answer: [
{tqaScore: 4, tqaContent: "冰毒", tqaRight: 0, tqaFlag: "A"}
{tqaScore: 4, tqaContent: "摇头丸", tqaRight: 0, tqaFlag: "B"}
{tqaScore: 4, tqaContent: "可卡因", tqaRight: 0, tqaFlag: "C"}
{tqaScore: 4, tqaContent: "海洛因", tqaRight: 1, tqaFlag: "D"}
],
tqiAddDate: "2020-09-01 15:47:35" tqiType: "单选题" tqi_add_date: "2020-09-01T07:47:35.000+0000" tqi_add_person: 1 tqi_id: 31 tqi_order: 7 tqi_question: "下面哪种不属于兴奋剂类毒品" tqi_status: 1 tqi_time: 30 tqi_type: 1 tqi_type_id: 1 tqt_id: 1 tqt_name: "禁毒知识题库"
}, message: "查询成功"
0: {tqaScore: 4, tqaContent: "冰毒", tqaRight: 0, tqaFlag: "A"} tqaContent: "冰毒" tqaFlag: "A" tqaRight: 0 tqaScore: 4 1: {tqaScore: 4, tqaContent: "摇头丸", tqaRight: 0, tqaFlag: "B"} 2: {tqaScore: 4, tqaContent: "可卡因", tqaRight: 0, tqaFlag: "C"} 3: {tqaScore: 4, tqaContent: "海洛因", tqaRight: 1, tqaFlag: "D"}
