赞
踩
- <!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>表单提交</title>
- <script src="./vue.js"></script>
- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
- <!-- 引入组件库 -->
- <script src="https://unpkg.com/element-ui/lib/index.js"></script>
- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
- <style>
-
- </style>
- </head>
-
- <body>
- <div id="app">
- <ul>
- <li v-for="(item, index) in arr" :key="index">
- <div>{{index+1}}、{{item.subject}}</div>
- <div>
- <el-radio v-for="(value, key) in item.select" :key="key" v-model="item.Us" :label="key">{{key}}.{{value}}</el-radio>
- </div>
- </li>
- </ul>
- <el-button type="success" @click="submitSure">提交</el-button>
- <div v-if="score">您的得分是:{{score}}分,正确答案的顺序是:<span v-for="(item, index) in arr" :key="index">{{index+1}}.{{item.success}},</span></div>
- </div>
- <script type="text/javascript">
- new Vue({
- el: '#app',
- data: {
- arr: [{
- subject: "如何优雅地处理Async/Await的异常? ",
- select: {
- "A": "百度",
- "B": "你猜",
- "C": "你猜",
-
- },
- success: 'A',
- Us: ''
- }, {
- subject: "如何优雅地处理Async/Await的异常? ",
- select: {
- "A": "百度",
- "B": "你猜",
- "C": "你猜",
- "D": "你猜",
- },
- success: 'B',
- Us: ''
- }, {
- subject: "如何优雅地处理Async/Await的异常? ",
- select: {
- "A": "百度",
- "B": "你猜",
- "C": "你猜",
- "D": "你猜",
- },
- success: 'C',
- Us: ''
- }, {
- subject: "如何优雅地处理Async/Await的异常? ",
- select: {
- "A": "百度",
- "B": "你猜",
- "C": "你猜",
- "D": "你猜",
- },
- success: 'D',
- Us: ''
- }],
- score: 0
- },
- computed: {},
- methods: {
- submitSure() {
- console.log(this.arr);
- let num = 0
- this.arr.forEach(element => {
- if (element.Us == element.success) {
- num++
- }
- });
- this.score = parseInt(num * 100 / this.arr.length)
- }
- },
- beforeMount() {},
- mounted() {
- console.log("挂载完成生命周期");
- // 未处理跨域
- axios.get("https://unpkg.com/axios/dist/axios.min.js").then(res => {
- console.log(res);
- })
- }
- })
- </script>
- </body>
-
- </html>

Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。