需求：
- 根据数据生成一个列表，显示标题、类型、选项、分值
- 得到每个题型的数量及总分、分数占比
- 如 单选题 2题 6分 45%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>综合练习</title>
</head>
<body>
<div id="app">
<p>单选题：{{danxuan.count}}题 {{danxuan.score}}分 分数占比:{{danxuan.percent| fmtfixed}}</p>
<p>多选题：{{duoxuan.count}}题 {{duoxuan.score}}分 分数占比:{{duoxuan.percent | fmtfixed}}</p>
<p>判断题：{{panduan.count}}题 {{panduan.score}}分 分数占比:{{panduan.percent | fmtfixed }}</p>
<hr>
<ul>
<!-- item 代表数组中的每一个 数组对象 -->
<li v-for='(item,i) in arr'>
<h2>{{i+1}}【{{item.type | fmtType}} 】{{item.title}} </h2>
<div>
<!-- 双重循环 从 item 中再选 o 代表数组中的每一个值-->
<p v-for='(o,j) in item.options'>
<span v-if='item.type!=2'>{{j | fmtOption}}.</span>
<input v-if='item.type===0' type="radio" name='radio'>
<input v-if='item.type===1' type="checkBox">
<input v-if='item.type===2' type="radio" name="radio">
{{o}}
</p>
</div>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 过滤器
Vue.filter('fmtType',function(val){
return ['单选题','多选题','判断题'][val]
})
Vue.filter('fmtOption',function(val){
return 'ABCDEF'[val]
})
Vue.filter('fmtfixed',function(val){
return (val * 100).toFixed(2) + '%'
})
new Vue({
el: '#app',
data() {
return {
arr: [
{
"id": 1001,
"title": "1+1等于几？",
"options": [
"2",
"4",
"5",
"0"
],
"score": 2,
"type": 0
},
{
"id": 1002,
"title": "以下哪些数是偶数？",
"options": [
"2",
"3",
"5",
"0"
],
"score": 3,
"type": 1
},
{
"id": 1003,
"title": "地球是太阳系中最大的星体？",
"options": [
"正确",
"错误"
],
"score": 3,
"type": 2
},
{
"id": 1004,
"title": "汉朝时出现青花瓷？",
"options": [
"正确",
"错误"
],
"score": 3,
"type": 2
},
{
"id": 1005,
"title": "2+1等于几？",
"options": [
"2",
"4",
"3",
"6"
],
"score": 2,
"type": 0
}
]
}
},
computed: {
// 计算 分数 总分
totalScore(){
// 初始默认值为 0
return this.arr.reduce(function(total,curr){
return total + curr.score
},0)
},
danxuan(){
return this.getInfo(0)
},
duoxuan(){
return this.getInfo(1)
},
panduan(){
return this.getInfo(2)
},
},
methods: {
// 单选 多选 判断 代码重复 封装成一个方法 最后传值调用
getInfo(type){
// 数组筛选 (filter 找出符合条件的数组) 分别找出 单选数组 多选数组 判断数组
let res = this.arr.filter(r=>r.type===type)
// 从已筛选过的数组中 实现分数累加 (reduce 要给个初始默认值)
// total 最后累加的结果 curr 当前元素
let score = res.reduce(function(total,curr){
return total += curr.score
},0)
let percent = score / this.totalScore
// return 出来一个对象
return{
count:res.length,
score,
percent
}
}
},
})
</script>
</body>
</html>
共有条评论 网友评论