千葉式 2022-05-05 09:41 采纳率: 92.9%
浏览 37
已结题

Vue checkbox 输出异常

输出了一整个完整的数组并不是往数组里添加内容

img

<!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>


  • 写回答

1条回答 默认 最新

  • 小草的味道 2022-05-05 16:11
    关注

    参考

    
    ```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>
     
    
    
    

    ```

    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 5月12日
  • 创建了问题 5月5日

悬赏问题

  • ¥100 复现论文:matlab仿真代码编写
  • ¥15 esp32驱动GC9A01循环播放视频
  • ¥15 惠普360g9的最新bios
  • ¥30 这个功能用什么软件发合适?
  • ¥60 微信小程序,取消订单,偶尔订单没有改变状态
  • ¥15 用pytorch实现PPO算法
  • ¥15 关于调制信号的星座图?
  • ¥30 前端传参时,后端接收不到参数
  • ¥15 这是有什么问题吗,我检查许可证了但是显示有呢
  • ¥15 机器学习预测遇到的目标函数问题