【vue】在vue项目中按顺序动态24个英文字母选项：A B C D E F......

效果展示：

点击增加选项和答案后，会按顺序新增24位的英文字母：

<!-- html -->
<el-button type="danger" size="small" @click="addQuestion">+增加选项与答案</el-button>

<!-- js -->
<script>
	export default {
		data(){
			return {
				i:0,
				form: {
		        // 选项
		        options: [
		          {
		            // 选中的A B C D
		            code: 'A',
		            // input中输入的每个选项
		            title: '',
		            // 图片url
		            img: '',
		            // 布尔值true或false，选的哪个选项，哪个选项就为true
		            isRight: false
		          },
		          {
		            code: 'B',
		            title: '',
		            img: '',
		            isRight: false
		          },
		          {
		            code: 'C',
		            title: '',
		            img: '',
		            isRight: false
		          },
		          {
		            code: 'D',
		            title: '',
		            img: '',
		            isRight: false
		          }
		        ]
			}
		},
		methods:{
			// 随机顺序生成ABCDE...字母的函数
		    setDesc() {
		      const letterArr = []
		      // 字母A的code值是65，但因为已经到字母D了，所以直接从69E开始循环
		      for (let i = 69; i < 91; i++) {
		        letterArr[i] = String.fromCharCode(i)
		      }
		      return letterArr
		    },
		    // 增加选项和答案按钮
		    addQuestion() {
		      // 调用随机顺序生成ABCDE...字母的函数，可以打印randomAbc 数组看下
		      // 有69个元素是空的，所以直接进行了截取
		      const randomAbc = this.setDesc().splice(69)
		      const res = [
		        ...this.form.options,
		        {
		          code: randomAbc[this.i],
		          title: '',
		          img: '',
		          isRight: false
		        }
		      ]
		      this.i++
		      this.form.options = res
		    }
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73