动态行间样式-蒲公英云

动态行间样式

野性酷女 2022-08-28 05:54 200阅读 0赞

注意：代码所需vue可以通过npm i vue —save下载，然后引入即可

<!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>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <style>
        .red {
            background: red;
        }
        .orange {
            background: orange;
        }
        .yellow {
            background: yellow;
        }
        .green {
            background: green;
        }
        .lime {
            color: lime;
        }
        .blue {
            color: blue;
        }
        .purple {
            color: purple;
        }
        .course {
            overflow: hidden;
        }
        .every {
            width: 200px;
            height: 200px;
            border: 1px solid blue;
            float: left;
            margin: 10px;
        }
        .area {
            overflow: hidden;
        }
        .every-area {
            float: left;
            padding: 10px 20px;
            margin: 20px;
            background: #ccc;
            border-radius: 5px;
            cursor: pointer;
        }
        .active {
            background: #ff4400;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 特殊情况下使用，只有自己是这个样式 -->
        <div style="background: red;color: #fff;">好好学习</div>
        <!-- 动态行间样式 :style="json" -->
        <div :style="json">天天向上</div>
        <div :style="{background:'pink'}">今天周五</div>
        <!-- 案例 -->
        <div class="course">
            <div class="every" v-for="(item,index) in course" :style="{background:item.color}">
                <h3 >名称：{
   {item.title}}</h3>
                <div>价格：
                    <span v-if="item.price!=0">{
   {item.price.toFixed(2)}}元</span>
                    <span v-else>免费学习</span>
                </div>
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
              json:{
                  background:"blue",
                  color:"#fff",
                  fontSize:"30px",
                  textAlign:"center"
              },
               //课程
               course:[
                    {
                        id:1,
                        title:"暑假班",
                        price:200,
                        color:"red"
                    },
                    {
                        id:2,
                        title:"数学特长班",
                        price:199,
                        color:"orange"
                    },
                    {
                        id:3,
                        title:"疯狂物理",
                        price:299,
                        color:"yellow"
                    },
                    {
                        id:4,
                        title:"疯狂物理2",
                        price:0,
                        color:"green"
                    },
                    {
                        id:1,
                        title:"暑假班",
                        price:200,
                        color:"lime"
                    },
                    {
                        id:2,
                        title:"数学特长班",
                        price:199,
                        color:"blue"
                    }
                ],
            },
        })
    </script>
</body>
</html>