Vue之style的用法

本文轉載自查看原文 2017-10-21 21:30 4204 js/ vue.js

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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue中style的用法在vue中style的用法 Vue 設置style屬性 Vue Class 與 Style 綁定 vue控制style樣式 Vue 設置style樣式 vue的 :class 與 :style 的講解 Vue的style綁定 vue Class與Style綁定 vue 中 style 的私有作用域 scoped 和深度作用選擇器及 /deep/ 用法