Vue实现ascii码动态生成ABCD选项

706 阅读1分钟

场景:

制作选择题选项需要实时添加选项

对于这个功能,如果自己手动写数组来实现太过麻烦.

代码实现

<template>
  <div>
     <button @click="add">点击添加</button>
     <div v-for="item in arry" :key="item">
      <input type="radio" name="options">
       {{ itme }}
     </div> <!-- 生成选项 -->
  </div>
</template>
<script>
export default {
  name: '',
  data () {
    return {
    arry : ['A', 'B', 'C', 'D'] // 定义一个默认选项数组
    }
  },
  methods: {
   add () {
       const a = this.arry[this.arry.length - 1] //获取选项数组的追后一个选项
       const b = a.charCodeAt() + 1 // 将选项的字符转化为ascii码并且加一
       const c = String.fromCharCode(b) //将加一后的ascii码重新转化为字符
       this.arry.push(c) //将转化后的字符加入数组
      
     }
   }
}
</script>


下面上ASCII码对照表!!!

ASCII码对照表

ASCII.png