Vue 单选题多选题

846 阅读1分钟
<div id="app">
    <ul>
        <li v-for="(item,i) in list">
       [{{item.type|eq}}]  {{i+1}}、{{item.title}}
           <ul>
               <li v-for='(option,i) in item.options'>
                   {{i | ab}}、
                 <input type="radio" :name="'option'+item.id" v-if='[0,1].includes(item.type)'> 
                 <input type="checkbox" :name="'option'+item.id" v-if='item.type===2'> 
                        {{option}}
                </li>
           </ul>
        </li>
    </ul>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
    Vue.filter('eq', function (val) {
        return ['单选题','多选题','判断题'][val]
      })
      Vue.filter('ab', function(val){
          return ['A','B','C','D'][val]
      })
    var app = new Vue({
        el: "#app",
        data() {
            return {
                list: []
            }
        },
        async   mounted() {
       let res = await axios.get('./subject.json')
            this.list = res.data
        },
    })
</script>