m0_64097952 2022-04-09 11:58 采纳率: 100%
浏览 68
已结题

从html弄到vue里的,script里的内容弄不好.用的是uni-app

从html弄到vue里的,一直弄不好。script里的内容调不好,请求调通 。 用的是uni-app

<template>
    <view >
            <input style="border: 0.5px solid #000000;" type="number" id="number" class="input" name="q" placeholder="请输入4位不重复的数字" ></input>
            <button class="button" type="button" onclick="javascript:matchValue();">确定</button>
        <div class="alert primary" id="result">
        </div>
            <tbody id="matchlist">
            </tbody>
    </view>
</template>

<script>
    var k = 7; //猜测数字
    var correct = !1,
        base = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
        start = parseInt(6 * Math.random(), 10),
        num = 0,
        setArray = [];
    base.sort(function() {
        return .5 < Math.random() ? -1 : 1
    });
    setArray = base.slice(start, start + 4);
    function g(a) {
        return document.getElementById(a)
    }
    function Html(a) {
        g("result").innerHTML = a
    }
    function filterStr(a) {
        a = a.split("");
        for (var b = [], d = 0, c = 0; c < a.length; c++) "" != b && null != b.toString().match(new RegExp(a[c], "g")) || "" == a[c] || (b[d] = a[c], b.sort(), d++);
        return b
    }
    function matchValue() {
        document.getElementById('result').innerHTML = '';
        if (num < k) {
            var a = g("number").value.replace(/\s/g, "").substring(0, 4),
                b = a.split(""),
                d = 0,
                c = 0;
            if (4 == filterStr(a).length) {
                num++;
                for (a = 0; a < setArray.length; a++)
                    if (setArray[a] == b[a]) d++;
                    else
                        for (var e = 0; e < b.length; e++) setArray[a] == b[e] && c++;
                a = d + "A" + c + "B";
                var html = "<tr><td>" + num + "</td><td>" + b.join("") + "</td><td>" + a + "</td></tr>"
                document.getElementById("matchlist").innerHTML = document.getElementById("matchlist").innerHTML + html;
                "4" == d && Html("<span style='color:green'>恭喜答对了!</span>")
            } else Html("<span style='color:red'>输入有误</span>")
        } else Html("7次还没有猜出来么?答案是:" + setArray.join(""))
    };
</script>

<style>
    .input{
        margin-top: 20px;
        height: 40px;
        text-align: center;
        margin-left: 20px;
        margin-right: 20px;
    }
    .button{
        font-size: 16px;
        margin-top: 15px;
        margin-left: 50px;
        margin-right: 50px;
    }
    .txt{
        height: 50rpx;
        width: 50rpx;
        margin-right: 10rpx;
        background-color: #F1F1F1;
        padding: 10rpx;
        border-radius: 10rpx;
    }
    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>


img

  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2022-04-09 12:59
    关注

    完全和vue不搭,题主最好先看下vue的语法


    示例代码如下

    img

    <div id="app">
        <template>
            <div>
                <input style="border: 0.5px solid #000000;" type="number" v-model="value" class="input" placeholder="请输入4位不重复的数字">
                <button class="button" type="button" @click="matchValue">确定</button>
                <div class="alert primary" v-html="result"></div>
                
                 <div v-for="x in errors" :key="x" v-html="x"></div>
                 
            </div>
        </template>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var vue = new Vue({
            el: '#app',
            data: {
                setArray: [],
                result: '',
                k: 7,
                num: 0,
                errors: [],
                value:''
            },
            mounted() {
                var start = parseInt(6 * Math.random(), 10);
                var base = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0].sort(function () {
                    return .5 < Math.random() ? -1 : 1
                });
                this.setArray = base.slice(start, start + 4);
            },
            methods: {
                matchValue() {
                    this.result = '';
                    if (this.num < this.k) {
                        var a = this.value.replace(/\s/g, "").substring(0, 4),
                            b = a.split(""),
                            d = 0,
                            c = 0;
                        if (4 == this.filterStr(a).length) {
                            this.num++;
                            for (a = 0; a < this.setArray.length; a++)
                                if (this.setArray[a] == b[a]) d++;
                                else
                                    for (var e = 0; e < b.length; e++) this.setArray[a] == b[e] && c++;
                            a = d + "A" + c + "B";
                            var html = "<table border=0><tr><td>" + this.num + "</td><td>" + b.join("") + "</td><td>" + a + "</td></tr></table>";
                            this.errors.push(html)
    
                            if ("4" == d) this.result = "<span style='color:green'>恭喜答对了!</span>";
    
                        }
                        else this.result = "<span style='color:red'>输入有误</span>";
    
                    } else this.result=`"${this.k}次还没有猜出来么?答案是:${this.setArray.join("")}`
                },
                filterStr(a) {
                    a = a.split("");
                    for (var b = [], d = 0, c = 0; c < a.length; c++) "" != b && null != b.toString().match(new RegExp(a[c], "g")) || "" == a[c] || (b[d] = a[c], b.sort(), d++);
                    console.log(b)
                    return b
                }
            }
        })
    </script>
    
    <style>
        .input {
            margin-top: 20px;
            height: 40px;
            text-align: center;
            margin-left: 20px;
            margin-right: 20px;
        }
    
        .button {
            font-size: 16px;
            margin-top: 15px;
            margin-left: 50px;
            margin-right: 50px;
        }
    
        .txt {
            height: 50rpx;
            width: 50rpx;
            margin-right: 10rpx;
            background-color: #F1F1F1;
            padding: 10rpx;
            border-radius: 10rpx;
        }
    
        .logo {
            height: 200rpx;
            width: 200rpx;
            margin-top: 200rpx;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 50rpx;
        }
    
        .text-area {
            display: flex;
            justify-content: center;
        }
    
        .title {
            font-size: 36rpx;
            color: #8f8f94;
        }
    </style>
    
    
    
    

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
    1人已打赏
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 4月18日
  • 已采纳回答 4月10日
  • 创建了问题 4月9日

悬赏问题

  • ¥15 carsim与simulink联合方针模拟无控制器驾驶员驾驶效果
  • ¥25 annaconda jvpyter
  • ¥20 来一个会抓包app支付接口的
  • ¥30 vivado2017.4的sdk打不开
  • ¥50 matlab,文献复现
  • ¥20 寻找Flink CDC指导,有偿咨询
  • ¥15 cruise如何仿真不同温度下车辆的经济性?
  • ¥20 扑克牌游戏的完整代码
  • ¥88 求帮安装Python架构的vnpy
  • ¥20 逻辑回归法分析品牌知名度和购买意向