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


Posted in Javascript onSeptember 30, 2016

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

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动态添加、删除选题的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
随鼠标上下滚动的jquery代码
Dec 05 Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 Javascript
javascript变量声明实例分析
Apr 25 Javascript
浅谈javascript中的DOM方法
Jul 16 Javascript
AngularJS入门教程之双向绑定详解
Aug 18 Javascript
js实现自动轮换选项卡
Jan 13 Javascript
微信小程序 MD5的方法详解及实例代码
Mar 10 Javascript
微信小程序与php 实现微信支付的简单实例
Jun 23 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
微信小程序实现吸顶效果
Jan 08 Javascript
原生JS实现拖拽效果
Dec 04 Javascript
关于List.ToArray()方法的效率测试
Sep 30 #Javascript
微信小程序 window_x64环境搭建
Sep 30 #Javascript
JS框架之vue.js(深入三:组件1)
Sep 29 #Javascript
JavaScript 对象详细整理总结
Sep 29 #Javascript
JS实现拖动滚动条评分的效果代码分享
Sep 29 #Javascript
Angular 中 select指令用法详解
Sep 29 #Javascript
jQuery视差滚动效果网页实现方法经验总结
Sep 29 #Javascript
You might like
PHP 和 COM
2006/10/09 PHP
PHP中使用gettext来支持多语言的方法
2011/05/02 PHP
PHP中图片等比缩放的实例
2013/03/24 PHP
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
推荐25款php中非常有用的类库
2014/09/29 PHP
JS复制到剪贴板示例代码
2013/10/30 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
2016/02/16 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
2017/02/22 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
python装饰器初探(推荐)
2016/07/21 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
Python TestCase中的断言方法介绍
2019/05/02 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
python中pop()函数的语法与实例
2020/12/01 Python
使用CSS3的ruby-position固定注音位置的用法示例
2016/07/05 HTML / CSS
迪梵英国官方网站:Darphin英国
2017/12/06 全球购物
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
《花的勇气》教后反思
2014/02/12 职场文书
2014年幼儿园元旦活动方案
2014/02/13 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
2014最新实习证明模板
2014/10/02 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
秋菊打官司观后感
2015/06/03 职场文书
七年级思品教学反思
2016/02/20 职场文书
Python利用capstone实现反汇编
2022/04/06 Python