从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>
示例代码如下
<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>
格式不对，参考：
<script>
export default {
name: 'Camera',
data() {
return {
}
}
},
created() {
},
methods: {
initData() {
this.loading = true
getCameraList(this.listQuery).then(res => {
this.tableData = res.data
this.loading = false
})
},
// 多选
selectionChangeHandle(val) {
this.ids = val
}
}
}
</script>
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632