vue数独运算小游戏特效代码下载


vue数独运算小游戏特效代码下载
vue数独运算小游戏特效代码下载以及数独运算、小游戏等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/index.css">

2. 引入JS

<script src="js/vue.min.js"></script>
<script src="js/index.js"></script>

3. HTML代码

	<div id="sudo">
        <div class="btnbox">
            <el-button :type="hard == 3 ? 'primary': ''" @click="change(3)">简单</el-button>
            <el-button :type="hard == 5 ? 'primary': ''" @click="change(5)">一般</el-button>
            <el-button :type="hard == 7 ? 'primary': ''" @click="change(7)">困难</el-button>
        </div>
        <div class="tableList">
            <el-row>
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <div class="table">
                        <ul v-for="(row,index) in dataList" :key="index">
                            <li v-for="(col, ind) in row" :key="ind">
                                <span v-if="col.disabled">{{col.value}}</span>
                                <input v-else type="tel" v-model="dataList[index][ind].value">
                            </li>
                        </ul>
                    </div>
                    <div class="btnbox">
                        <el-button @click="save">提交</el-button>
                        <el-button @click="showAnswer">{{isShowAnswer? '隐藏答案': '显示答案'}}</el-button>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" v-show="isShowAnswer">
                    <div class="table">
                        <ul v-for="(row,index) in gridList" :key="index">
                            <li v-for="(col, ind) in row" :key="ind">
                                <span>{{gridList[index][ind]}}</span>
                            </li>
                        </ul>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>

相关推荐

发表评论

相关文章