【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 Dcode: 'A',// input中输入的每个选项title: '',// 图片urlimg: '',// 布尔值true或false，选的哪个选项，哪个选项就为trueisRight: 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>

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

java web配置dll文件_JavaWeb项目中dll文件动态加载方法解析（详细步骤）
相信很多做Java的朋友都有过用Java调用JNI实现调用C或C++方法的经历,那么Java Web中又如何实现DLL/SO文件的动态加载方法呢.今天就给大家带来一篇JAVA Web项目中DLL/SO ...
Unity3D教程：实现房产项目中的材质动态切换
在许多典型的房产展示项目当中,经常需要动态地实现例如墙纸.地板等材质的更换以获得不同的展示效果,下面将通过一个简单的教程介绍实现这一功能的关键技术. 首先需要场景中创建一个简易的样品房,样品房里面有一 ...
SQL数据库中的一列数据按照英文字母先后顺序排列，怎么可以做到？
SQL数据库中的一列数据按照英文字母先后顺序排列,怎么可以做到?前提是一组人名,我的全是汉字呀其实这个问题,我想多了,其实没那么复杂,一个简单的语句就能完成, 一般ORDER BY [F]就可以了 ...
python 异常处理编程编写程序，统计用户输入的内容中，分别包含多少个英文字母字符、数字字符、空格、其他字符。
python 异常处理编程第二题要求编写程序,统计用户输入的内容中,分别包含多少个英文字母字符.数字字符.空格.其他字符. 示例代码方法一 s=input('请输入一行文字:\n')eN,n ...
Vue项目中如何设置动态的TDK
TDK是什么 TDK就是网站的标题(title).描述(description)和关键词(keyword) TDK在哪里上面大佬对TDK的概念解释的很全面,但是在网页中的TDK在哪里呢,作为开发人员 ...
vue导入swiper_vue项目中导入swiper插件的方法
这篇文章主要为大家详细介绍了vue项目中导入swiper插件的方法,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 版本选择 swiper是个常用 ...
vue移动端项目中统一滚动条样式与效果
写在前面原生的滚动条安卓端与苹果端有诸多不一样的地方,在我们的用户体验中,自然是想统一用户体验,而最常见的滚动条必然是要考虑在其中的,这篇文章主要是介绍vue项目中插件better-scroll的使 ...
SpringBoot+Vue博客项目中遇到的坑
shiro整合jwt,用于用户登录逻辑流程: 登录流程: 用户登录:输入用户名和密码–>后端校验: –>有异常:处理异常 –>正常,生成jwt 访问接口时,统一被jwtFilter, ...
Vue电商项目中遇到的一些问题
1.为什么vue组件有的写成export default,有什么用? 声明一个vue,相当于 new Vue({}) 达到可复用的目的,也就是说,export default 相当于导出当前vue组件 ...

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

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

最新文章

热门文章