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>
  • 相关阅读:
    Spring笔记:常用xml标签和属性 山上下了雪
    Spring笔记:Hello World 山上下了雪
    Spring笔记:bean的自动装配 山上下了雪
    IntelliJ IDEA 2020.3.3 x64破解到2099年
    每日长进计划
    idea测试类中的测试方法没有运行按钮
    删除所有的phpfpm进程命令
    高质量编程
    单例模式也能玩出花
    宝塔Linux面板安装命令
  • 原文地址:https://www.cnblogs.com/jinsuo/p/7637849.html
Copyright © 2011-2022 走看看