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 相关文章推荐
表单项的name命名为submit、reset引起的问题
Dec 22 Javascript
网页图片延时加载的js代码
Apr 22 Javascript
ajax 同步请求和异步请求的差异分析
Jul 04 Javascript
jQuery常见开发技巧详细整理
Jan 02 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
Jul 04 Javascript
JavaScript判断密码强度(自写代码)
Sep 06 Javascript
基于jquery实现最简单的选项卡切换效果
May 08 Javascript
Javascript中字符串replace方法的第二个参数探究
Dec 05 Javascript
基于AngularJS实现表单验证功能
Jul 28 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
5分钟快速掌握JS中var、let和const的异同
Sep 19 Javascript
vue keep-alive的简单总结
Jan 25 Vue.js
关于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获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
PHP用身份证号获取星座和生肖的方法
2013/11/07 PHP
PHP 错误处理机制
2015/07/06 PHP
php中strtotime函数性能分析
2016/11/20 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
php7下的filesize函数
2019/09/30 PHP
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
JQuery插件Style定制化方法的分析与比较
2012/05/03 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
jquery判断浏览器后退时候弹出消息的方法
2014/08/11 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
vue.js使用v-if实现显示与隐藏功能示例
2018/07/06 Javascript
详解微信JS-SDK选择图片遇到的坑
2018/08/15 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
基于Express框架使用POST传递Form数据
2019/08/10 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
Javascript实现简易天数计算器
2020/05/18 Javascript
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
解决Django数据库makemigrations有变化但是migrate时未变动问题
2018/05/30 Python
NumPy.npy与pandas DataFrame的实例讲解
2018/07/09 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
django基于restframework的CBV封装详解
2019/08/08 Python
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
2014年党员自我评议对照检查材料
2014/09/20 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
西安大雁塔导游词
2015/02/10 职场文书
法律意见书范文
2015/05/20 职场文书
建国大业观后感
2015/06/01 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电