效果展示：

點擊增加選項和答案后，會按順序新增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......的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。