Vue.js动态添加、删除选题的实例代码

大家先看看页面效果吧，当当当当```````````````````````

图中第二个选题是小颖点击了'新增选题'按钮，然后出来的，当你点击了'删除选项'或'删除选题'按钮，就会删除相应的选项和选题。

超文本标记语言代码

模板div class=' main-container ' div class=' form-horizontal '模板v-for='(主题索引，主题)有问题div class=' form-group ' label class=' col-sm-1 control-label '选题：/label label class=' col-sm-2 control-label red remove-pad ' v-if=' $ index 0 ' @ click=' deleteSubjectFun(subjectIndex)'删除选题/label/div div class=' form-group ' label class=' col-sm-1 control-label '标题：/labeldiv class='col-sm-2 '输入类型='text' class='form-control '占位符='未填写v-model=' subject。title '/div/div class=' form-group ' label class=' col-sm-1 control-label '正确答案：/labeldiv class='col-sm-1 '输入类型='text' class='form-control答案占位符='未填写readonly=' true ' v-model=' subject。答案'/div span class='提示“消息”请在以下选项中，勾选出正确答案/span/div div class=' form-group ' label class=' col-sm-1 control-label '分值：/labeldiv class='col-sm-1 '输入类型=' number ' min=' 1 ' max=' 100 ' class=' form-control ' v-model=' subject。score ' @ key up=' score fun(主题索引)'/div/div class=' form-group ' label class=' col-sm-1 control-label '选项：/label/div class=' form-group ' div class=' col-sm-3 mg1 ' ul class=' upper-Latin ' template v-for=' subject。选项数据' Li输入类型=' checkbox ' class=' checkbox-答案' v-model='主题。答案' value=' { { opdt。id } } ' div class=' options-div '输入类型=' text ' class=' form-control options-input ' placeholder='未填写v-model=' opdt。options ' label class=' control-label blue remove-pad ' v-if=' OpdtIndex==subject。选项数据。length-1 ' @ click=' addnew options fun(subjectIndex，opdtIndex)'新增选项/label label class=' control-label red remove-pad ' v-if=' opdtIndex 0 ' @ click=' delete options fun(subject index，Opdtindex)'删除选项/label/div/Li/template/ul/div/div class=' form-group ' div class=' col-sm-offset-1 col-sm-4 ' button class=' blue boder ' @ click=' addNewSubjectFun(subjectIndex)'新增选题/button/div/div class=' split-line '/div/template div class=' form-group ' div class=' col-sm-offset-1 col-sm-4 ' button class=' BTNBTN-primary ' @ click=' savequestfun '提交/button/div/div/div/模板js代码

脚本导出默认{ components: {，props: { }，methods: {//新增选题addNewSubjectFun:函数（索引){ var subjectDataMes={ }；subjectDataMes.id=索引2;subjectdatames . title=subjectdatames。答案=[]；subjectdatames . score=10 subjectdatames。options数据=[{ id : ' A '，options : ' ' }]；这个。问题。推送(subjectDataMes)；},//判断每个题目的分值不能小于零且不能大于一百score fun :函数(索引){ if(this。问题[索引]。得分0){这个。问题[索引].得分=10;这个$ root.tipStr='选题这个问题[索引].标题""的分值不能小于零；} else if(这个。问题[索引]。得分100){这个。问题[索引].得分=10;这个$ root.tipStr='选题这个问题[索引].标题""的分值不能大于一百；}},//删除选题删除主题功能：函数（索引){this.question.splice(索引，1);},//新增选项添加新选项un:函数(subjectIndex，OpdtIndex){ var options datames={ }；选项数据。id=字符串。来自char code(64(Opdtindex 2))；//将编号从数字转换成大写字母。options datames . options=var SubjectDataMes=this。问题[主题索引].optionsDatasubjectdatames。push(options datames)；},//删除选项删除选项版本：函数(subjectIndex，opdtIndex){ var subjectDataMes=this。问题[主题索引].optionsDatasubjectdatames。拼接(Opdtindex，1)；}，savequestionfun :函数(){ this。问题；调试器；}}，ready: function() {}，data(){ return { question :[{ id : 1，title: ' '，answer: []，score:10，optionsData: [{id: 'A '，options: ''}]，}]，} } } } }脚本CSS代码

样式范围。mg1 { padd : 8px 0 113 px}.上拉丁文{列表样式-类型：上拉丁文；}输入。表单控件。options-input { display : inline-block；/*宽度： 499.16像素；*/宽度： 100%；}.博德{border: 1px固体；背景-color : # fff；边界半径： 4px线高： 34pxpadding: 0 15px }。蓝色{ color: # 2689cd文本对齐：中心；}标签。红色{ color : # c 9302 c}标签。拆卸-pad {/* padd : 10px 20px 10px 15px；*/行高： 34px文本-左对齐：}.分割线{ height: 10px边框-top: 2px虚线# E7E8EC宽度： 900像素；}.提示-消息{行高： 34px}.options-div { margin-left : 26px；边距-top :-25px；衬垫-底部： 25px}/样式以上所述是小编给大家介绍的Vue.js动态添加、删除选题的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！