vue基础---07样式 - 码农教程

00.内联样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        默认写法,可以在浏览器中控制台查看其样式
        <div style="width:100px;height:100px;background:blue;"></div>
        使用“:”拼接
        <div style="width:100px;height:100px;background:red;" :style="{border:'10px solid red'}"></div>
        CSS内联样式变量拼接
        <div style="width:100px;height:100px;background:red" :style="{border:borderWidth+'px solid blue',padding:paddingWidth+'px'}"></div>
        CSS内联样式放置对象
        <div :style="styleObj"></div>
        CSS内联样式放置数组
        <div :style="styleArr"></div>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:"#app",
            data:{
                //下面对应CSS内联样式变量拼接
                borderWidth:50,
                paddingWidth:40,
                //下面对应CSS内联样式放置对象
                styleObj:{
                    width:"100px",
                    height:"100px",
                    padding:"50px",
                    backgroundColor:"skyblue"
                },
                // 对应CSS内联样式放置数组
                styleArr:[
                    {
                        width:"100px",
                        height:"100px",
                        backgroundColor:"pink"
                    },{
                        border:"5px solid red"
                    }
                ]
            }
        })
    </script>
</body>
</html>

01.侧边栏（事例）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
        .page{
            width:100vw;
            height:100vh;
            background-color:#efefef;
            position:fixed;
            left:0;
            top:0;
        }
        .ment{
            width:50vw;
            height:100vh;
            background-color:skyblue;
            position:fixed;
            left:0;
            top:0;
            /* transform:translateX(50vw); */
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="page">
            <h3>首页</h3>
            <button @click="toggleMenu">切换侧边栏</button>
        </div>
        <div class="ment" :style="{transform:'translateX('+menuWidth+'vw)'}">
            <h3>侧边栏</h3>
        </div>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                menuWidth:100
            },
            methods:{
                toggleMenu:function(){
                    if(this.menuWidth==100){
                        this.menuWidth=50;
                    }else{
                        this.menuWidth=100;
                    }
                }
            }
        })
    </script>
</body>
</html>

原文地址：https://www.cnblogs.com/hunter1/p/15250790.html