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

Question

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

Answer 1

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

列表渲染 — Vue.js Vue.js - The Progressive JavaScript Framework https://cn.vuejs.org/v2/guide/list.html

示例代码如下

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