zoukankan      html  css  js  c++  java
  • v-bind:style

    <!-- <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-bind:style</title>
    </head>
    <body>
        <div id="box" v-bind:style="{color:activeColor,fontSize:fontSize+'px'}">v-bind:style 样式的绑定</div>
        
    </body>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el:"#box",
            data:{
                activeColor:'red',
                fontSize:30
            }
        })
    </script>
    </html> -->
    
    <!-- <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-bind:style</title>
    </head>
    <body>
        <div id="box" v-bind:style="styleObject">v-bind:style 样式的绑定 把style写成一个对象</div>
        
    </body>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el:"#box",
            data:{
                styleObject:{
                    color:'blue',
                    fontSize:'30px'
                }
            }
        })
    </script>
    </html> -->
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-bind:style</title>
    </head>
    <body>
        <div id="box" v-bind:style="[baseStyles, overridingStyles]">v-bind:style 样式的绑定 把style写成数组</div>
        
    </body>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el:"#box",
            data:{
                baseStyles:{
                    color:'red',
                    fontSize:'40px'
                },
                overridingStyles:{  //允许你将多个对象绑定进去,感觉就像class一样。
                    fontWeight:'bold',
                    textShadow:'5px 5px 10px #333'   //有些css属性,例如transform,需要针对不同浏览器加不同前缀,这在vuejs里是自动添加的,无需考虑;
                }
            }
        })
    </script>
    </html>
  • 相关阅读:
    ASP.NET Core 3.0 WebApi中使用Swagger生成API文档简介
    $.ajax
    C#使用RabbitMQ
    WebAPI+NLog实现接口调用日志输出
    Spire.Doc组件读取与写入Word
    .net中RabbitMQ生产者/消费者
    第2课
    第1课
    详解usbmon抓取的log各字段的含义
    使用 usbmon 抓取 usb 总线上的数据
  • 原文地址:https://www.cnblogs.com/jinsuo/p/7637849.html
Copyright © 2011-2022 走看看