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>

描述：

其中的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>

查看全文

相关阅读:
【nginx】常见的陷阱和错误
 linux配置文件的一些调优
 关于防刷票的一些问题
 关于nginx的限速模块
 使用Javascript监控前端相关数据
 【mysql】关于Index Condition Pushdown特性
 【mysql】关于临时表
 堆和栈的区别（转过无数次的文章）
深入PHP内核之in_array
【mysql】索引的优化

原文地址：https://www.cnblogs.com/chaofei/p/7706646.html