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>  
  • 相关阅读:
    微信小程序在扫一扫进入小程序的时候 安卓手机后台继续运行的常规处理
    在微信小程序上,帮助中心界面实现类似手风琴案例
    使用artTemplate的模板引擎,使用简单
    使用原生JavaScript实现图片预加载,方法简单代码少
    在wepy框架中 使用promise对发送网络请求进行封装 包括post跟get请求
    JavaScript实现按字典排序进行md5加密, 以及个人在小程序也可以实现
    当在微信扫一扫进入小程序 并获取到二维码的参数 从而实现扫码进入小程序
    第九章:看看精彩的世界-使用网络技术
    玉渊潭公园
    军事博物馆
  • 原文地址:https://www.cnblogs.com/chaofei/p/7706646.html
Copyright © 2011-2022 走看看