就这样吧,以后自己替换JSON数据就行了,麻烦采纳下。
提取做的题目和答案.zip
https://wwx.lanzoui.com/iHLHopun5sb
他做好的显示 可是我打开报错的
、
我打开提示这个 怎么回事
{{index + 1}}、{{item.subjectTitle}}
{{detail.optionTitle}}
谢谢大佬们
就这样吧,以后自己替换JSON数据就行了,麻烦采纳下。
提取做的题目和答案.zip
https://wwx.lanzoui.com/iHLHopun5sb
他做好的显示 可是我打开报错的
、
我打开提示这个 怎么回事
{{index + 1}}、{{item.subjectTitle}}
{{detail.optionTitle}}
谢谢大佬们
第一点,文件路径有问题,使用了绝对路径,如果直接拖进或者双击使用浏览器打开,无法加载js文件
<script src="/jquery.js"></script>
<script src="/vue.js"></script>
<script src="/iview.js"></script>
====》改成下面的,去掉/,但是html文件需要和3个js文件在同一个目录
<script src="jquery.js"></script>
<script src="vue.js"></script>
<script src="iview.js"></script>
第二点,代码里面使用到了ajax加载资源,需要搭建服务器通过http协议访问才行,要不按照第一点的方式打开,ajax除了ie6浏览器,不允许访问本地资源。如果你的是chrome浏览器,可以配置chrome启动允许ajax访问本地资源,具体看这个问题中我的回答:https://ask.csdn.net/questions/7440588
注意:添加参数后要将chrome全部关闭,在重新打开才行。
或者不用ajax加载,data.json数据源改为js文件,然后给数据起个变量名,通过script加载数据源。
办法如下。将data.json命令为data.js,然后记事本打开data.js,开头部分新增如下加粗内容,将数据存储到js变量中。
var questions={。。。原来的内容,就新增黑色的部分
data.html改为如下就可以了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>提取做的题目和答案</title>
<link rel="stylesheet" href="/iview.css">
<style>
body {
box-sizing: border-box;
padding: 20px 0;
background-color: #f8f8f8;
}
.ivu-card + .ivu-card {
margin-top: 20px;
}
.ivu-form .ivu-form-item:last-of-type {
margin-bottom: 0;
}
</style>
</head>
<body>
<div id="app">
<Row>
<i-col span="20" offset="2">
<Card v-for="(item, index) in list" :key="index">
<p slot="title">{{index + 1}}、{{item.subjectTitle}}</p>
<i-form>
<Form-item v-for="(detail, i) in item.subjectOptionVOList" :key="i">
<Radio :value="is_check(item.answer, detail.optionId)" :disabled="!is_check(item.answer, detail.optionId)">{{detail.optionTitle}}</Radio>
</Form-item>
</i-form>
</Card>
</i-col>
</Row>
</div>
</body>
<script src="jquery.js"></script>
<script src="vue.js"></script>
<script src="iview.js"></script>
<script src="data.js"></script>
<script>
new Vue({
el: '#app',
data: {
list: questions.data.subjectList,
},
methods: {
is_check(answer, optionId) {
const optionArr = answer.split('&');
return optionArr.includes(optionId);
}
}
})
</script>
</html>
效果如下
帮助到你可以点击采纳支持下哦,谢谢。。~
也可以点击这里下载修改过的文件。https://download.csdn.net/download/technologist_40/19416832