vue九九乘法表

最新推荐文章于 2023-09-02 09:32:41 发布

小白菜鸟☜

最新推荐文章于 2023-09-02 09:32:41 发布

阅读量437

点赞数

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/m0_66827203/article/details/125490948

版权

九九乘法表，单，偶时背景变化

当 i 单数时，背景颜色变为红色
当 i 偶数时，背景颜色变为aqua

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>九九乘法表</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
        .a {
            background-color: red;
        }

        .b {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-for="(i,index) in arr" :key="index">
            <span v-for="(j,index) in arr" :key="index" v-if="i>=j">
                <!-- 当 i 单数时，背景颜色变为红色 -->
                <span v-if="i%2==1" class="a">{{j}}*{{i}}=&nbsp;{{j*i}}&nbsp;&nbsp;</span>
                <!-- 当 i 为偶数时，背景颜色为aqua； -->
                <span v-else="i%2==0" class="b">{{j}}*{{i}}=&nbsp;{{j*i}}&nbsp;&nbsp;</span>

            </span>

        </div>

    </div>

    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                arr: [1, 2, 3, 4, 5, 6, 7, 8, 9],

            },



        })

    </script>

</body>

</html>