(一) js + Vue 写扫雷

目录RESTFul一、RESTFul是什么二、概念三、资源与URI3.1 RESTFul常用的url请求3.2 RESTFul的url地址怎么写四、后台的接口代码五、调用RESTFul的软件RESTFul一、RESTFul是什么RESTFul是Representational State Transfer一句话的缩写，直接翻译过来是”表现层状态转移”RESTFul 他不是一门新技术...

彼岸锋

111279人浏览 · 2021-01-11 17:57:45

彼岸锋 · 2021-01-11 17:57:45 发布

(一) js + Vue 写扫雷

1 定义表格

<table id="table1" >
    <tr v-for="a2 in a1">
        <td v-for="a3 in a2" style="border: red solid 1px">
            <center>{{a3}}</center>
        </td>
    </tr>
</table>
<script>
    let a = [[], [], [], [], [], [], [], [], []];
    let l = 1;
    for (let i = 0; i < 9; i++) {
        for (let j = 0; j < 9; j++) {
            a[i][j] = l;
            l++;
        }
    }
    new Vue({
        el: "#table1",
        data: {
            a1: a,
        }

    })
</script>

2、添加无重复的随机数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script rel="javascript" src="../lib/vue.js"></script>
</head>
<body>
<table id="table1">
    <tr v-for="a2 in a1">
        <td v-for="a3 in a2" style="border: red solid 1px">
            <center>{{a3}}</center>
        </td>
    </tr>
</table>

<script>
    //定义数组 9 * 9
    let a = [[], [], [], [], [], [], [], [], []];
    let l = 1;
    let arr = [];
    for (let i = 0; i < 9; i++) {
        for (let j = 0; j < 9; j++) {
            a[i][j] = l;
            l++;
        }
    }
    //添加10个随机数，
    for (let i = 0; i < 10; i++) {
        Ran();
    }

    //添加随机数，
    function Ran() {
        do {
            Random = Math.floor(Math.random() * 81 + 1);
        } while (arr.indexOf(Random) != -1)
        arr.push(Random)
    }
    console.log(arr)
        new Vue({
            el: "#table1",
            data: {
                a1: a,
            }

        })
</script>
</body>
</html>

3、添加判断放到表格随机生成雷在表格上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script rel="javascript" src="../lib/vue.js"></script>
</head>
<body>
<table id="table1">
    <tr v-for="a2 in a1">
        <td v-for="a3 in a2" style="border: red solid 1px;width: 25px;height: 25px">
            <center>
                <font color="black" v-if="ar.indexOf(a3) != -1" style="background: red;">
                    雷
                </font>
                <font color="black" v-else>
                    {{a3}}
                </font>
            </center>
        </td>
    </tr>
</table>
<script>
    //定义数组 9 * 9
    let a = [[], [], [], [], [], [], [], [], []];
    let l = 1;
    let arr = [];
    for (let i = 0; i < 9; i++) {
        for (let j = 0; j < 9; j++) {
            a[i][j] = l;
            l++;
        }
    }
    //添加10个随机数，
    for (let i = 0; i < 10; i++) {
        Ran();
    }
    //添加随机数，
    function Ran() {
        do {
            Random = Math.floor(Math.random() * 81 + 1);
        } while (arr.indexOf(Random) != -1)
        arr.push(Random)
    }
    console.log(arr)
        new Vue({
            el: "#table1",
            data: {
                a1: a,
                ar:arr
            }
        })
</script>
</body>
</html>

花开一千年,花落一千年,花叶永不见

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^