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 相关文章推荐
Valerio 发布了 Mootools
Sep 23 Javascript
JavaScript获取GridView中用户点击控件的行号,列号
Apr 14 Javascript
js下利用控制器载入对应脚本
Jul 17 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
Oct 24 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
Nov 20 Javascript
js获取时间并实现字符串和时间戳之间的转换
Jan 05 Javascript
jQuery鼠标事件汇总
Aug 30 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
使用微信SDK自定义分享的方法
Jul 03 Javascript
JavaScript实现外溢动态爱心的效果的示例代码
Mar 21 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 删除一个数组中的某个值.兼容多维数组!
2012/02/18 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
JavaScript 函数调用规则
2009/09/14 Javascript
jquery 年会抽奖程序
2011/12/22 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
jQuery动画效果实现图片无缝连续滚动
2016/01/12 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
详解Vue用axios发送post请求自动set cookie
2017/05/10 Javascript
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
基于React+Redux的SSR实现方法
2018/07/03 Javascript
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
使用python编写脚本获取手机当前应用apk的信息
2014/07/21 Python
Python中map和列表推导效率比较实例分析
2015/06/17 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
django迁移文件migrations的实现
2020/03/31 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
将keras的h5模型转换为tensorflow的pb模型操作
2020/05/25 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
数据库测试通常都包括哪些方面
2015/11/30 面试题
就业自荐书
2013/12/05 职场文书
银行求职自荐书
2014/06/25 职场文书
教师群众路线心得体会
2014/11/04 职场文书
幼儿教师个人总结
2015/02/05 职场文书
校本培训个人总结
2015/02/28 职场文书
2015年高一班主任工作总结
2015/05/13 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android