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

前端之家收集整理的这篇文章主要介绍了Vue.js动态添加、删除选题的实例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

HTML代码

标题:
  • 新增选题
    提交

    js代码

    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,saveQuestionFun:function(){ this.question;debugger; } },ready: function() { },data() { return { question: [{ id: 1,title: '',answer: [],score:10,optionsData: [{ id: 'A',options: '' }],}],} } }

    css代码

    .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; }

    以上所述是小编给大家介绍的Vue.js动态添加删除选题的实例代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

    原文链接:https://www.f2er.com/vue/45462.html

    猜你在找的Vue相关文章