千峰商城-springboot项目搭建-24-vue的style绑定

1.复杂的style绑定:

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    
        <script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
        
        <div id="container">
            <!--当使用v-bind绑定内联样式时:
                1.使用{}定义style样式,才能获取data中的值,{}要遵循JSON格式
                2.{}中不再使用style样式属性名“font-size”,而是使用对应的js属性名“fontSize”
            -->
            <div :style="{color:colorname, fontSize: fontsize+'px'}">千峰java-wh2022</div>
        </div>
        
        <script type="text/javascript">
            var vm = new Vue({
                el:"#container",
                data:{
                    colorname:"green",
                    fontsize:30
                }
            });
        </script>
        
    </body>
</html>
复制代码

 

 

 

2.字符串绑定内联样式

 

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    
        <script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
        
        <div id="container">
            <!--当使用v-bind绑定内联样式时:
                1.使用{}定义style样式,才能获取data中的值,{}要遵循JSON格式
                2.{}中不再使用style样式属性名“font-size”,而是使用对应的js属性名“fontSize”
            -->
            <div :style="{color:colorname, fontSize: fontsize+'px'}">千峰java-wh2022</div>
            
            <!--我们可以直接为style绑定一个data中定义好的内联样式字符串-->
            <div :style="mystyle1">千峰-java</div>
        </div>
        
        <script type="text/javascript">
            var vm = new Vue({
                el:"#container",
                data:{
                    colorname:"green",
                    fontsize:30,
                    mystyle1:"color:orange;font-size:45px"
                }
            });
        </script>
        
    </body>
</html>
复制代码

 

 

 

 3.对象类型绑定内联样式
复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    
        <script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
        
        <div id="container">
            <!--当使用v-bind绑定内联样式时:
                1.使用{}定义style样式,才能获取data中的值,{}要遵循JSON格式
                2.{}中不再使用style样式属性名“font-size”,而是使用对应的js属性名“fontSize”
            -->
            <div :style="{color:colorname, fontSize: fontsize+'px'}">千峰java-wh2022</div>
            
            <!--我们可以直接为style绑定一个data中定义好的内联样式字符串-->
            <div :style="mystyle1">千峰-java</div>
            
            <!--我们可以直接为style绑定一个data中定义好的内联样式对象-->
            <div :style="mystyle2">千峰-java</div>
        </div>
        
        <script type="text/javascript">
            var vm = new Vue({
                el:"#container",
                data:{
                    colorname:"green",
                    fontsize:30,
                    mystyle1:"color:orange;font-size:45px",
                    mystyle2:{
                        color:"blue",
                        fontSize:"60px"
                        
                    }
                }
            });
        </script>
        
    </body>
</html>
复制代码

 

 

 

4.联合内联样式
复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    
        <script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
        
        <div id="container">
            <!--当使用v-bind绑定内联样式时:
                1.使用{}定义style样式,才能获取data中的值,{}要遵循JSON格式
                2.{}中不再使用style样式属性名“font-size”,而是使用对应的js属性名“fontSize”
            -->
            <div :style="{color:colorname, fontSize: fontsize+'px'}">千峰java-wh2022</div>
            
            <!--我们可以直接为style绑定一个data中定义好的内联样式字符串-->
            <div :style="mystyle1">千峰-java</div>
            
            <!--我们可以直接为style绑定一个data中定义好的内联样式对象-->
            <div :style="mystyle2">千峰-java</div>
            
        <!--可以在同一个style上通过数组引用多个内联样式的对象--> <div :style="[mystyle2,mystyle3]">千峰-java</div> </div> <script type="text/javascript"> var vm = new Vue({ el:"#container", data:{ colorname:"green", fontsize:30, mystyle1:"color:orange;font-size:45px", mystyle2:{ color:"blue", fontSize:"60px" }, mystyle3:{ textShadow:"orange 3px 3px 3px" } } }); </script> </body> </html>
复制代码

 

 

 

 
 
 
posted @   临易  阅读(37)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
点击右上角即可分享
微信分享提示