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 相关文章推荐
js实现权限树的更新权限时的全选全消功能
Feb 17 Javascript
jquery.alert 弹出式复选框实现代码
Jun 15 Javascript
js弹出层之1:JQuery.Boxy (二)
Oct 06 Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
JavaScript中的Repaint和Reflow用法详解
Jul 27 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
node.js操作MongoDB的实例详解
Oct 11 Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
Aug 26 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
Aug 14 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
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
php中将数组转成字符串并保存到数据库中的函数代码
2013/09/29 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
一个符号插入器 中用到的js代码
2007/09/04 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
2010/04/12 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
简单了解python高阶函数map/reduce
2019/06/28 Python
python处理document文档保留原样式
2019/09/23 Python
Python selenium的基本使用方法分析
2019/12/21 Python
python中round函数保留两位小数的方法
2020/12/04 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
师范毕业生求职信
2014/07/11 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
公司给客户的感谢信
2015/01/23 职场文书
毕业生学校组织意见
2015/06/04 职场文书
2015暑期社会实践通讯稿
2015/07/18 职场文书
深入理解go slice结构
2021/09/15 Golang