vue学习笔记(三)class和style绑定

时间  2020-01-03
标签 vue 学习 笔记 class style 绑定 繁體版
原文   原文链接

前言

经过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数，咱们已经更近一步的知道了关于vue的一些知识，本篇博客将进一步探讨vue其它方面的内容，vue中关于class和style绑定，关于class和style咱们并不陌生，这个在学习css的时候就是屡见不鲜了，操做元素的 class 列表和内联样式是数据绑定的一个常见需求。由于它们都是属性，因此咱们能够用 v-bind 处理它们：只须要经过表达式计算出字符串结果便可。不过，字符串拼接麻烦且易错。所以，在将 v-bind 用于 class 和 style 时，Vue.js 作了专门的加强。表达式结果的类型除了字符串以外，还能够是对象或数组，因此本章将带你了解vue中如何绑定class和style。javascript

本章目标

  • 学会使用绑定class的对象语法
  • 学会使用绑定class的数组语法
  • 学会使用绑定style的对象语法
  • 学会使用绑定style的数组语法

class的对象语法

(1)直接写class属性

(1)能够传给 v-bind:class 一个对象，以动态地切换 class

<div v-bind:class="{ active: isActive }"></div>

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthy，若是为truthy则使用active这个类，若是为false则不使用active这个类。css

注意：在 javascript 中，truthy（真值）指的是在布尔值上下文中，转换后的值为真的值。全部值都是真值，除非它们被定义为 假值（即除 false、0、""、null、undefined 和 NaN 之外皆为真值。html

JavaScript 中的真值示例以下（将被转换为 true，if 后的代码段将被执行）vue

if (true)
if ({})
if ([])
if (42)
if ("foo")
if (new Date())
if (-42)
if (3.14)
if (-3.14)
if (Infinity)
if (-Infinity)

(2)在对象中传入更多属性来动态切换多个 class。此外，v-bind:class 指令也能够与普通的 class 属性共存。

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

data中的数据java

data: {
  isActive: true,
  hasError: false
}

结果web

<div class="static active"></div>

当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，若是 hasError 的值为 true，class 列表将变为 "static active text-danger"数组

示例：app

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
            }
            .red{
                background: red;
            }
            .yellow{
                background: yellow;
            }
            .border{
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div class="border" :class="{red:red}"></div>
        </div>
        <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm=new Vue({
                el:'#app',
                data:{
                    red:true,    //当red的truthy时，这个类才会生效
                }
            })
        </script>
    </body>
</html>

结果：函数

(2)class做为对象处理

当咱们须要在一个元素上绑定不少个类的时候，咱们就可能须要写很长很长的代码，这样的代码对于咱们从此的维护是十分糟糕的，因此为了解决这个问题，咱们能够将须要添加的类抽取出来，做为一个对象处理。post

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>class做为对象处理</title>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
            }
            .red{
                background: red;
            }
            .yellow{
                background: yellow;
            }
            .border{
                border: 1px solid black;
            }
            .radius{
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div :class="classObj"></div>
        </div>
        <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm=new Vue({
                el:'#app',
                data:{
                    red:true,    //当red的true时，这个类才会生效
                    classObj:{
                        red:true,
                        border:true,
                        radius:true
                    }
                }
            })
        </script>
    </body>
</html>

结果：

 能够看到，咱们将须要添加的类做为一个对象，而后绑定，也是同样的效果。

(3)class做为计算属性处理

class做为计算属性，这个的话就比较厉害了，这里能够进行逻辑处理等等

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
            }
            .red{
                background: red;
            }
            .yellow{
                background: yellow;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div :class="computeClass"></div>
        </div>
        <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm=new Vue({
                el:'#app',
                data:{
                    red:true,
                    yellow:true
                },
                computed:{
                    computeClass(){
                        return {
                            red:this.red&&this.yellow
                        }
                    }
                }
            })
        </script>
    </body>
</html>

结果：

class的数组语法

(1)直接绑定在元素上

咱们能够把一个数组传给 v-bind:class，以应用一个 class 列表

<div v-bind:class="[activeClass, errorClass]"></div>

data中的数据

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

结果：

<div class="active text-danger"></div>

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
            }
            .green{
                background: green;
            }
            .border{
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div :class="[green,border]"></div>
        </div>
        <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm=new Vue({
                el:'#app',
                data:{
                    green:'green',
                    border:'border'
                }
            })
        </script>
    </body>
</html>

结果：

(2)使用三元表达式绑定

若是你也想根据条件切换列表中的 class，能够用三元表达式

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
            }
            .red{
                background: red;
            }
            .border{
                border: 1px solid green;
            }
            .green{
                background: green;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div :class="[isActive? red: green]"></div>
        </div>
        <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm=new Vue({
                el:'#app',
                data:{
                    isActive:false,
                    red:"red",
                    green:'green'
                }
            })
        </script>
    </body>
</html>

结果：

(3)数组和对象

当有多个条件 class 时这样写有些繁琐。因此在数组语法中也可使用对象语法

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 300px;
                height: 300px;
            }
            .red{
                background: red;
            }
            .radius{
                border-radius: 50px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div :class="[{red:red},radius]"></div>
        </div>
        <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm=new Vue({
                el:'#app',
                data:{
                    red:true,
                    radius:'radius'
                }
            })
        </script>
    </body>
</html>

结果：

 

style的对象语法

(1)直接绑定style

v-bind:style 的对象语法十分直观——看着很是像 CSS，但实际上是一个 JavaScript 对象。CSS 属性名能够用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data中的数据

data: {
  activeColor: 'red',
  fontSize: 30
}

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <div :style="{fontSize:fontSize+'px',color:color}">你好</div>
        </div>
        <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm=new Vue({
                el:'#app',
                data:{
                    color:'red',
                    fontSize:30
                }
            })
        </script>
    </body>
</html>

结果：

 

(2)用对象绑定style

<div v-bind:style="styleObject"></div>

data中的数据

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <div :style="styleObj">欢迎学习vue绑定style</div>
        </div>
        <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm=new Vue({
                el:'#app',
                data:{
                    styleObj:{
                        color:'red',
                        fontSize:'30px',
                        fontWeight:'bold'
                    }
                }
            })
        </script>
    </body>
</html>

结果：

(3)用计算属性绑定style

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <div :style="computeStyle">你好</div>
        </div>
        <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm=new Vue({
                el:'#app',
                data:{
                    bl:false
                },
                computed:{
                    computeStyle(){
                        return{
                            color:this.bl?'red':'blue',
                            fontSize:this.bl?'20px':'50px',
                            fontWeight:this.bl?'bold':'normal'
                        }
                    }
                }
            })
        </script>
    </body>
</html>

结果：

 

style的数组语法

(1)直接绑定在元素上

 v-bind:style 的数组语法能够将多个样式对象应用到同一个元素上

<div v-bind:style="[baseStyles, overridingStyles]"></div>

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                display: inline-block;
                background: green;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div :style="[styleObj1,styleObj2]">你好</div>
        </div>
        <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm=new Vue({
                el:'#app',
                data:{
                    styleObj1:{
                        color:'red',
                    },
                    styleObj2:{
                        textAlign:'center',
                        lineHeight:'100px'
                    }
                }
            })
        </script>
    </body>
</html>

结果：

 

(2)多重值问题

style 绑定中的属性提供一个包含多个值的数组，经常使用于提供多个带前缀的值，例如：

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                background: red;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
        </div>
        <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm=new Vue({
                el:'#app',
            })
        </script>
    </body>
</html>

结果：

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程