m0_64097952 2022-04-09 11:58 采纳率: 100%

# 从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>
<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;
}
.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>

``````

• 写回答

#### 3条回答默认 最新

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

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

示例代码如下

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

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

``````

本回答被题主选为最佳回答 , 对您是否有帮助呢?
评论
1人已打赏

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