HTML、JavaScript 、Vue之【数独解密】（续上一篇）

最新推荐文章于 2025-09-11 11:00:07 发布

原创

最新推荐文章于 2025-09-11 11:00:07 发布 · 478 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #vue.js

本文介绍了一个使用HTML、JavaScript和Vue.js实现的数独解密项目。通过Vue实现数据双向绑定，允许用户输入数独数据，并在点击【解密】后计算出解决方案。在开发过程中遇到的坑包括：数据类型匹配问题，Vue数组更新不触发渲染，以及JavaScript除法导致的小数点保留问题。针对这些问题，文章提供了相应的解决方案。

一、页面展示

（1）页面中的空格为input，方便输入数据，数据通过使用Vue实现双向动态绑定

（2）任意填入数据

（3）点击【解密】，即解出数独答案（当然我这里是让程序计算出一种结果便结束的

二、代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数独</title>
    <script type="text/javascript" src="../Import/vue.js"></script> <!--在上-->
    <link rel="stylesheet" href="../Import/element-ui-index.css">
    <script type="text/javascript" src="../Import/element-ui-index.js"></script>
    <style>
        li {
            list-style: none;
        }
        .el-input__inner {
            border-radius: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <ul>
        <h2 style="margin-left: 155px">数独解密</h2>
        <li v-for="(value,i) in items.length">
            <span v-for="(item,j) in items[i]" @click="changeNum(i,j)">
                <el-input class="ano" v-model="items[i][j]" maxlength="1"
                          style="width: 45px;font-size: 20px;text-align: center;cursor: pointer"></el-input>
            </span>
        </li>
    </ul>
    <el-button size="medium" style="margin-left: 300px" @click="reset">重置</el-button>
    <el-button size="medium" type="primary" @click="

最低0.47元/天解锁文章