效果展示：

點(diǎn)擊增加選項(xiàng)和答案后，會(huì)按順序新增24位的英文字母：

<!-- html --> <el-button type="danger" size="small" @click="addQuestion">+增加選項(xiàng)與答案</el-button><!-- js --> <script>export default {data(){return {i:0,form: {// 選項(xiàng)options: [{// 選中的A B C Dcode: 'A',// input中輸入的每個(gè)選項(xiàng)title: '',// 圖片urlimg: '',// 布爾值true或false，選的哪個(gè)選項(xiàng)，哪個(gè)選項(xiàng)就為trueisRight: false},{code: 'B',title: '',img: '',isRight: false},{code: 'C',title: '',img: '',isRight: false},{code: 'D',title: '',img: '',isRight: false}]}},methods:{// 隨機(jī)順序生成ABCDE...字母的函數(shù)setDesc() {const letterArr = []// 字母A的code值是65，但因?yàn)橐呀?jīng)到字母D了，所以直接從69E開(kāi)始循環(huán)for (let i = 69; i < 91; i++) {letterArr[i] = String.fromCharCode(i)}return letterArr},// 增加選項(xiàng)和答案按鈕addQuestion() {// 調(diào)用隨機(jī)順序生成ABCDE...字母的函數(shù)，可以打印randomAbc 數(shù)組看下// 有69個(gè)元素是空的，所以直接進(jìn)行了截取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>

總結(jié)

以上是生活随笔為你收集整理的【vue】在vue项目中按顺序动态24个英文字母选项：A B C D E F......的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。