设计知识点
el-radio
本次实战是el-radio-group配合el-radio使用
el-checkbox
本次实战是el-checkbox-group配合el-checkbox使用
el-divider
el-divider使用的较少，其实就是分割线
v-for&v-if
v-for主要是对el-checkbox和el-radio代码的动态书写
v-if可以当成if语句
Vue.$set
Vue.$set(target,key,value)为target数据新增属性，用Java语言翻译Vue.$set(对象，属性名，属性值)
实战案例
实战效果图
实战代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 注意下面引用的是在线js和css文件，国内不可用 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-form>
<template v-if='singleQuestion.length>0'>
<el-divider>单选题</el-divider>
<el-form-item v-for='que in singleQuestion' :label='setLabel(que.id,que.content)' :key='setLabel(que.id,que.content)'>
<el-radio-group v-model='que.singleData'>
<el-radio v-for='option in setOptions(que.options)' :key='option' :label='option.charAt(0)'>{{option}}</el-radio>
</el-radio-group>
</el-form-item>
</template>
<template v-if='multipleQuestion.length>0'>
<el-divider>多选题</el-divider>
<el-form-item v-for='que in multipleQuestion' :label='setLabel(que.id,que.content)' :key='setLabel(que.id,que.content)'>
<el-checkbox-group v-model='que.multipleData'><!-- 注意checkbox-group的v-model是数组，否则有error -->
<el-checkbox v-for='option in setOptions(que.options)' :key='option' :label='option.charAt(0)'>{{option}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
</template>
<template>
<el-divider>简答题</el-divider>
<el-form-item v-for='que in simpleQuestion' :label='setLabel(que.id,que.content)' :key='setLabel(que.id,que.content)'>
<el-input type='textarea' :min="2" :max="5" v-model='que.simpleData'></el-input>
</el-form-item>
</template>
<el-form-item>
<el-button @click='toSubmit'>提交</el-button>
</el-form-item>
</el-form>
</div>
</body>
</html>
<script>
new Vue({
el:"#app",
data:{
singleQuestion:[
{id:1,content:'单选题1',options:'A.选项A,B.选项B,C.选项C,D.选项D'},
{id:2,content:'单选题2',options:'A.选项A,B.选项B,C.选项C,D.选项D'},
{id:3,content:'单选题3',options:'A.选项A,B.选项B,C.选项C,D.选项D'}
],
multipleQuestion:[
{id:1,content:'多选题1',options:'A.选项A,B.选项B,C.选项C,D.选项D'},
{id:2,content:'多选题2',options:'A.选项A,B.选项B,C.选项C,D.选项D'},
{id:3,content:'多选题3',options:'A.选项A,B.选项B,C.选项C,D.选项D'}
],
simpleQuestion:[
{id:1,content:'简答题1'},
{id:2,content:'简答题2'},
{id:3,content:'简答题3'}
]
},
created(){
this.initQuestionAns()
},
methods:{
setLabel(id,content){
return `${id}. ${content}`
},
setOptions(options){
return options.split(',')
},
initQuestionAns(){
// this.$set的使用常用于对Object类型加入一个新的属性和值，用java形象理解即：this.$set(对象，属性，属性值)
//下面分别为单选，多选和简答增加答案的属性
this.singleQuestion.forEach(ques=>{
this.$set(ques,"singleData","")
})
this.multipleQuestion.forEach(ques=>{
this.$set(ques,"multipleData",[])
})
this.simpleQuestion.forEach(ques=>{
this.$set(ques,"simpleData","")
})
},
toSubmit(){
//提交查看自己的答题清空
console.log(this.singleQuestion)
console.log(this.multipleQuestion)
console.log(this.simpleQuestion)
}
},
})
</script>
9万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
