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>

查看全文

相关阅读:
mysq 日期相减
 说说时间观与时间管理——北漂18年（71）
ionic之切换开关
 ionic之单选框
 SELECT ... LOCK IN SHARE MODE和SELECT ... FOR UPDATE locks在RR模式下可以看到最新的记录
 14.5.2.3 Consistent Nonlocking Reads 一致性非锁定读
 14.5.2.2 autocommit, Commit, and Rollback
14.5.2 事务隔离级别
 对于唯一索引使用唯一条件搜索, InnoDB 只锁定找到的index record,不是它之前的区间
 mysql explain 解释

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