Nginx配置 数据算法 memory gridview enums clojure 直销系统源码 springboot单点登录 nginx默认端口号 centos7安装gcc linux查看jdk安装路径 oracle时间格式化 java 注解 python时间戳 java编程学习 java搭建 java学习平台 java系统学习 ntscan java电子书下载 java小程序 hexworkshop cubase下载 js正则匹配字符串 js发送http请求 udp测试工具 骰子牛牛怎么玩 babelrc 怎么看淘龄 deallocate 手机刷机助手 vs2017密钥 ps怎么磨皮祛痘 pr旋转视频 python去重 清华天河 ansys安装 excel并排查看 二代妖精下载 adb工具包
当前位置: 首页 > 学习教程  > 编程语言

Vue 综合练习

2020/7/24 9:34:28 文章标签:

需求:

  • 根据数据生成一个列表,显示标题、类型、选项、分值
  • 得到每个题型的数量及总分、分数占比
  • 如 单选题 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>

本文链接: http://www.dtmao.cc/news_show_50134.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?