零基础入门Vue之皇帝的新衣——样式绑定-Toy模板网

这篇具有很好参考价值的文章主要介绍了零基础入门Vue之皇帝的新衣——样式绑定。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

回顾

大致掌握了上一节的插值语法我已经可以把想要的数据显示到页面上，并且仅需要修改变量，页面就会跟着实时改变

但如果对于已经熟悉前端的人来说，单单有数据还是不太行，还需要css对数据进行样式的修饰，让页面更加好看

所本篇将记录记录 Class 与 Style 绑定的学习

总所周知，想要给DOM增加元素有两种方式，一种采用class选中，一种是直接内联样式绑定

绑定 HTML Class
绑定内联样式

绑定HTML Class

Vue对于绑定Class提供了两种语法：

对象语法
数组语法

请务必准备好以下css样式，并且能在HTML中索引到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://v2.cn.vuejs.org/js/vue.js"></script>
    <title>Document</title>
    <style>
        body{
            height: 100%;
        }
        div{
            width: 500px;
        }
        .style1{
            font-size: larger;
            text-align: center;
        }

        .style2{
            color: blueviolet;
            height: 500px;
        }

        .style3{
            background-color: pink;
            line-height: 500px;
        }
    </style>
</head>
<body>
    <div class="">Hello world</div>
</body>
<script>
    
</script>
</html>

如果按照正常写法，也可以直接这么做

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://v2.cn.vuejs.org/js/vue.js"></script>
    <title>Document</title>
    <style>
        body{
            height: 100%;
        }
        div{
            width: 500px;
        }
        .style1{
            font-size: larger;
            text-align: center;
        }

        .style2{
            color: blueviolet;
            height: 500px;
            line-height: 500px;
        }

        .style3{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="root" :class="className">Hello world</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
          className:"style1"
        }
    })
</script>
</html>

那么接下来，正文开始.....

对象语法

在对象语法中，可以在data里面，配置一个key为style名称，值为Boolean的对象，当使用v-bind绑定class时。

class可以是上面说的创建的对象，如果那个key的value为true，那么该样式就是启用的，反之不启用

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://v2.cn.vuejs.org/js/vue.js"></script>
    <title>Document</title>
    <style>
        body{
            height: 100%;
        }
        div{
            width: 500px;
        }
        .style1{
            font-size: larger;
            text-align: center;
        }

        .style2{
            color: blueviolet;
            height: 500px;
            line-height: 500px;
        }

        .style3{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="root" :class="classObj">Hello world</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            classObj:{ //该对象的key可以为class的样式名称
                style1:true, //开启字体水平居中 字体放大
                style2:false, //关闭字体颜色 div高度 垂直居中
                style3:true,  //开启背景颜色 
            }
        }
    })
</script>
</html>

数组语法

绑定样式还有另外一种语法，也就是数组语法

当绑定的class是一个数组时，Vue会默认这个数组全是样式的名称，这些样式是可以叠加的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://v2.cn.vuejs.org/js/vue.js"></script>
    <title>Document</title>
    <style>
        body{
            height: 100%;
        }
        div{
            width: 500px;
        }
        .style1{
            font-size: larger;
            text-align: center;
        }

        .style2{
            color: blueviolet;
            height: 500px;
            line-height: 500px;
        }

        .style3{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="root" :class="classList">Hello world</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
          className:"style1",
          classList:["style1","style2","style3"] //把需要的样式装入数组
        }
    })
</script>
</html>

小技巧

对于默认固定的样式，可以直接使用class，对于动态变动的样式，可以另外起一个”v-bind:class“

Vue在解析的时候会把它们叠加在一起

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://v2.cn.vuejs.org/js/vue.js"></script>
    <title>Document</title>
    <style>
        body{
            height: 100%;
        }
        div{
            width: 500px;
        }
        .style1{
            font-size: larger;
            text-align: center;
        }

        .style2{
            color: blueviolet;
            height: 500px;
            line-height: 500px;
        }

        .style3{
            background-color: pink;
        }
    </style>
</head>
<body>
    <!-- 默认样式style1写死不变 -->
    <div id="root" class="style1" :class="classList">Hello world</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
          className:"style1",
          classList:["style2","style3"] //把需要的样式装入数组
        }
    })
</script>
</html>

绑定内联样式

Vue对于内联样式也有两种绑定方式

对象语法
数组语法

对象语法

Vue允许将css对象直接配置成键值对，例如：

.style1{
  background-color:red;
}

可以直接配置成js对象的

{
  backgroundColor:'red',
}

注：其中要去掉”-“，然后采用驼峰命名方式，当然你也可以使用字符串的对象形式，例如：{'background-color':'red'}

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./vue.js"></script>
    <title>Document</title>
    <style>
        body{
            height: 100%;
        }
        div{
            width: 500px;
        }
    </style>
</head>
<body>
    <div id="root" :style="styleObj">Hello world</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
          styleObj:{
            fontSize: 'larger',
            textAlign: 'center',
            color: 'blueviolet',
            height: '500px',
            lineHeight: '500px',
            'background-color': 'pink' //采用字符串，原模原样写也可以
          }
        }
    })
</script>
</html>