zoukankan      html  css  js  c++  java
  • Vue之style的用法

    Vue中style的用法总结如下:

    v-bind:style  简写:style

    1.基本用法

    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <style>  
            .red{  
                color: red;  
            }  
            .blue{  
                background: blue;  
            }  
        </style>  
        <script src="vue.js"></script>  
        <script>  
            window.onload=function(){  
                new Vue({  
                    el:'#box',  
                    data:{  
      
                    },  
                    methods:{  
                    }  
                });  
            };  
        </script>   
    </head>  
    <body>  
        <div id="box">  
            <strong :style="{color:'red'}">文字...</strong>  
        </div>  
    </body>  
    </html>  

    描述:

    <strong :style="{color:'red'}">文字...</strong>

    其中的red是class的

    结果:

    2.采用数组形式

    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <style>  
            .red{  
                color: red;  
            }  
            .blue{  
                background: blue;  
            }  
        </style>  
        <script src="vue.js"></script>  
        <script>  
            window.onload=function(){  
                new Vue({  
                    el:'#box',  
                    data:{  
                        c:{color:'red'}  
                    },  
                    methods:{  
                    }  
                });  
            };  
        </script>  
    </head>  
    <body>  
        <div id="box">  
            <strong :style="[c]">文字...</strong>  
        </div>  
    </body>  
    </html>  

    描述:

    采用数组的形式,设置变量c,在data中以对象的形式设置style属性

    结果:

     3.使用数组的形式,设置多个属性

    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <style>  
            .red{  
                color: red;  
            }  
            .blue{  
                background: blue;  
            }  
        </style>  
        <script src="vue.js"></script>  
        <script>  
            window.onload=function(){  
                new Vue({  
                    el:'#box',  
                    data:{  
                        c:{color:'red'},  
                        b:{backgroundColor:'blue'}  
                    },  
                    methods:{  
                    }  
                });  
            };  
        </script>  
    </head>  
    <body>  
        <div id="box">  
            <strong :style="[c,b]">文字...</strong>  
        </div>  
    </body>  
    </html>  

    描述:

    和第二种一样,可以设置多个属性

    结果:

    4.使用设置一个变量的方法

    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <style>  
            .red{  
                color: red;  
            }  
            .blue{  
                background: blue;  
            }  
        </style>  
        <script src="vue.js"></script>  
        <script>  
            window.onload=function(){  
                new Vue({  
                    el:'#box',  
                    data:{  
                        a:{  
                            color:'red',  
                            backgroundColor:'gray'  
                        }  
                    },  
                    methods:{  
                    }  
                });  
            };  
        </script>  
    </head>  
    <body>  
        <div id="box">  
            <strong :style="a">文字...</strong>  
        </div>  
    </body>  
    </html>  
  • 相关阅读:
    [已解决] MAVEN安装代码到本地库,安装jar, source, javadoc的方式
    [已解决]Eclipse 插件Maven在使用 add dependency,找不到包,解决办法
    [已解决] windows 下 git 免输密码
    [已解决] windows 80端口被占用
    [已解决]Tomcat启动报 java.net.BindException: Address already in use: JVM_Bind
    [已解决] java.net.InetAddress.getHostName() 阻塞问题
    [已解决] 日常开发中禁用Tomcat自动重启
    [已解决] MyBatis 中bind用法
    [转]SOCKET通信中TCP、UDP数据包大小的确定
    使用beautifulsoup与requests爬取数据
  • 原文地址:https://www.cnblogs.com/chaofei/p/7706646.html
Copyright © 2011-2022 走看看