Vue checkbox 输出异常
输出了一整个完整的数组并不是往数组里添加内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
body {
text-align: center;
user-select: none;
transition: all 0.5s;
}
#box {
width: 800px;
height: 500px;
border: 2px solid;
margin: 0 auto;
text-align: left;
}
input {
margin-top: 15px;
}
</style>
</head>
<body>
<h1>测验</h1>
<div id="box">
<p id="tm">{{tm[index][0]}}</p>
<div id="option" v-for="i in 4">
<input :type="index>1?'checkbox':'radio'" :value="val[i-1]" v-model="index>1?(index>2?dxts2:dxts1):dxt[index]" />{{tm[index][i]}}
</div>
<input type="button" value="上一题" v-show="index==0?false:true" @click="fun1()" />
<input type="button" value="下一题" v-show="index==3?false:true" @click="fun2()" />
<br>
<br>
<p>作答：1、{{dxt[0]}}2、{{dxt[1]}}3、{{dxts1}}4、{{dxts2}}</p>
<p>标准答案1、{{da[0]}}2、{{da[1]}}3、{{da[2]}}4、{{da[3]}}</p>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
dxt: [],
dxts1: [],
dxts2: [],
index: 0,
val: ["A", "B", "C", "D"],
da: ['C', 'A', 'BCD', 'ABCD'],
tm: [
[
"1、在新的历史条件下，我们党面临着执政、改革开放、（C）、外部环境“四大考验”。",
"A 、商品经济",
"B 、内部环境",
"C 、市场经济",
"D 、执政能力"
],
[
"2、对马克思主义的信仰，对社会主义和共产主义的信念，是共产党人的（A）。",
"A 、政治灵魂",
"B 、精神支柱",
"C 、政治底线",
"D 、道德底线"
],
[
"3、我们党担负着团结带领人民（BCD）的重任。",
"A 、全面建设小康社会",
"B 、全面建成小康社会",
"C 、推进社会主义现代化",
"D 、实现中华民族伟大复兴"
],
[
"4、十八大报告提出，面对人民的信任和重托，面对新的历史条件和考验，全党必须增强“四个意识”（ABCD）",
"A 、忧患意识",
"B 、创新意识",
"C 、宗旨意识",
"D 、使命意识"
]
]
},
methods: {
fun1: function() {
if (this.index != 0) {
this.index--;
}
},
fun2: function() {
if (this.index != 3) {
this.index++;
}
}
}
})
</script>
</html>
参考
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
body {
text-align: center;
user-select: none;
transition: all 0.5s;
}
#box {
width: 800px;
height: 500px;
border: 2px solid;
margin: 0 auto;
text-align: left;
}
input {
margin-top: 15px;
}
</style>
</head>
<body>
<h1>测验</h1>
<div id="box">
<p id="tm">{{tm[index][0]}}</p>
<div id="option" v-for="i in 4">
<input :type="index>1?'checkbox':'radio'" :value="val[i-1]" v-model="dxts1[i-1]" />{{tm[index][i]}}
<!-- <input :type="index>1?'checkbox':'radio'" :value="val[i-1]" v-model="index>1?(index>2?dxts2:dxts1[i-1]):dxt[index]" />{{tm[index][i]}} -->
</div>
<input type="button" value="上一题" v-show="index==0?false:true" @click="fun1()" />
<input type="button" value="下一题" v-show="index==3?false:true" @click="fun2()" />
<br>
<br>
<p>作答：1、{{dxt[0]}}2、{{dxt[1]}}3、{{dxts1}}4、{{dxts2}}</p>
<p>标准答案1、{{da[0]}}2、{{da[1]}}3、{{da[2]}}4、{{da[3]}}</p>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
data:'',
dxt: [],
dxts1: [],
dxts2: [],
index: 0,
val: ["A", "B", "C", "D"],
da: ['C', 'A', 'BCD', 'ABCD'],
tm: [
[
"1、在新的历史条件下，我们党面临着执政、改革开放、（C）、外部环境“四大考验”。",
"A 、商品经济",
"B 、内部环境",
"C 、市场经济",
"D 、执政能力"
],
[
"2、对马克思主义的信仰，对社会主义和共产主义的信念，是共产党人的（A）。",
"A 、政治灵魂",
"B 、精神支柱",
"C 、政治底线",
"D 、道德底线"
],
[
"3、我们党担负着团结带领人民（BCD）的重任。",
"A 、全面建设小康社会",
"B 、全面建成小康社会",
"C 、推进社会主义现代化",
"D 、实现中华民族伟大复兴"
],
[
"4、十八大报告提出，面对人民的信任和重托，面对新的历史条件和考验，全党必须增强“四个意识”（ABCD）",
"A 、忧患意识",
"B 、创新意识",
"C 、宗旨意识",
"D 、使命意识"
]
]
},
methods: {
fun1: function() {
if (this.index != 0) {
this.index--;
}
},
fun2: function() {
if (this.index != 3) {
this.index++;
}
}
}
})
</script>
</html>
```