动态行间样式

野性酷女 2022-08-28 05:54 113阅读 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>
    
            
            <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>

效果：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/b2b96e1736fc440e94fac81075779a45.png