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

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

图中第二个选题是小颖点击了"新增选题"按钮,然后出来的,当你点击了"删除选项"或"删除选题"按钮,就会删除相应的选项和选题.
html代码

<template><div class="main-container"><div class="form-horizontal"><template v-for="（subjectIndex,subject） in question"><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">标题:</label><div class="col-sm-2"><input type="text" class="form-control" placeholder="未填写" v-model="subject.title"></div></div><div class="form-group"><label class="col-sm-1 control-label">正确答案:</label><div class="col-sm-1"><input type="text" class="form-control answer" placeholder="未填写" readonly="true" v-model="subject.answer"></div><span class="prompting-message">请在以下选项中,勾选出正确答案</span></div><div class="form-group"><label class="col-sm-1 control-label">分值:</label><div class="col-sm-1"><input type="number" min="1" max="100" class="form-control" v-model="subject.score" @keyup="scoreFun（subjectIndex）"></div></div><div class="form-group"><label class="col-sm-1 control-label">选项:</label></div><div class="form-group"><div class="col-sm-3 mg1"><ul class="upper-latin"><template v-for="（opdtIndex,opdt） in subject.optionsData"><li><input type="checkbox" class="checkbox-answer" v-model="subject.answer" value="{{opdt.id}}"><div class="options-div"><input type="text" class="form-control options-input" placeholder="未填写" v-model="opdt.options"><label class="control-label blue remove-pad" v-if="opdtIndex==subject.optionsData.length-1" @click="addNewOptionsFun（subjectIndex,opdtIndex）">新增选项</label><label class="control-label red remove-pad" v-if="opdtIndex>0" @click="deleteOptionsFun（subjectIndex,opdtIndex）">删除选项</label></div></li></template></ul></div></div><div class="form-group"><div class="col-sm-offset-1 col-sm-4"><button class="blue boder" @click="addNewSubjectFun（subjectIndex）">新增选题</button></div></div><div class="split-line"></div></template><div class="form-group"><div class="col-sm-offset-1 col-sm-4"><button class="btn btn-primary" @click="saveQuestionFun">提交</button></div></div></div></div></template>

js代码

<script>export default {components: {},props: {},methods: {// 新增选题addNewSubjectFun: function（index） {var subjectDataMes = {};subjectDataMes.id = index+2;subjectDataMes.title = "";subjectDataMes.answer =[];subjectDataMes.score = 10;subjectDataMes.optionsData = [{id: "A",options: ""}];this.question.push（subjectDataMes）;},// 判断每个题目的分值不能小于零且不能大于一百scoreFun:function（index）{if（this.question[index].score<0）{this.question[index].score=10;this.$root.tipStr = "选题""+this.question[index].title+""的分值不能小于零";}else if（this.question[index].score>100）{this.question[index].score=10;this.$root.tipStr = "选题""+this.question[index].title+""的分值不能大于一百";}},// 删除选题deleteSubjectFun: function（index） {this.question.splice（index, 1）;},// 新增选项addNewOptionsFun: function（subjectIndex, opdtIndex） {var optionsDataMes = {};optionsDataMes.id =String.fromCharCode（64 + （opdtIndex+2））; //将id从数字转换成大写字母.optionsDataMes.options = "";var subjectDataMes = this.question[subjectIndex].optionsData;subjectDataMes.push（optionsDataMes）;},// 删除选项deleteOptionsFun: function（subjectIndex, opdtIndex） {var subjectDataMes = this.question[subjectIndex].optionsData;subjectDataMes.splice（opdtIndex, 1）;},saveQuestionFun:function（）{this.question;debugger;}},ready: function（） {},data（） {return {question: [{id: 1,title: "",answer: [],score:10,optionsData: [{id: "A",options: ""}],}],}}}</script>

css代码

<style scoped>.mg1 {padding: 8px 0 0 113px;}.upper-latin {list-style-type: upper-latin;}input.form-control.options-input {display: inline-block; /*width: 499.16px;*/width: 100%;}.boder {border: 1px solid;background-color: #fff;border-radius: 4px;line-height: 34px;padding: 0 15px;}.blue {color: #2689cd;text-align: center;}label.red {color: #c9302c;}label.remove-pad {/*padding: 10px 20px 10px 15px;*/line-height: 34px;text-align: left;}.split-line {height: 10px;border-top: 2px dashed #E7E8EC;width: 900px;}.prompting-message {line-height: 34px;}.options-div {margin-left: 26px;margin-top: -25px;padding-bottom: 25px;}</style>

以上所述是小编给大家介绍的Vue.js动态添加、删除选题的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！