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>

查看全文

相关阅读:
python自动化_day3_基础数据类型的整理
 python自动化_day2_基础数据类型0410
解决PowerDesigner 12 建Oracle 9i数据库脚本双引号问题(转抄)
获取WPF资源，生成文件
 DataTable 用法归纳
 VS2008开发环境中容易遇到的3个问题之解决办法(转载)
调用线程必须为 STA，因为许多 UI 组件都需要(转载)
无法在Web服务器上启动调试。您不具备调试此应用程序的权限_解决方法
 js 数组去重问题
 HTML空格转义字符的使用

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