本文主要介绍如何使用Vue来绑定操作元素的class列表和内联样式(style属性).

因为class和style都是属性,所以通过v-bind命令来处理它们:只需要通过表达式计算出结果即可,不过字符串拼接麻烦且易错。因此,再将v-bind用于class和style属性时,Vue.js做了专门的增强,表达式结果类型除了字符串以外还可以是对象或者数组.

1、对象语法

(1)、绑定的数据对象内联在模版中

我们可以通过给html标签追加v-bind:class的指令,以动态的切换class,html代码如下:

<body>

    <div id="pageIndex">

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

    </div>

</body>

上面代码中的active和text-danger这两个类选择器是否存在取决于数据属性中的isActive和hasError是否为true,为true的话,类选择器就不存在,js代码如下:

var currentPage=new Vue({

      el:"#pageIndex",

      data:{

          isActive:true,

          hasError:true

      }

});

如上代码所示,v-bind:class指令可以和普通class共存,当isActive和hasError发生变化时,class列表也会进行相应的更新,

(2)、绑定的数据对象不内联在模版中

<body>

    <div id="pageIndex">

        <div class="static" v-bind:class="classObject">aaa</div>

    </div>

</body>

<script type="text/javascript">

    var currentPage=new Vue({

        el:"#pageIndex",

        data:{

            classObject:{

                "active":true,

                "text-danger":true

            }

        }

    });

</script>

结果和(1)中的一模一样.

(3)、绑定的数据对象不内联在模版中,且该数据对象可以通过计算属性得出

<body>

    <div id="pageIndex">

        <div class="static" v-bind:class="classObject">aaa</div>

    </div>

</body>

<script type="text/javascript">

    var currentPage=new Vue({

        el:"#pageIndex",

        data:{

            isActive:true,

            error:null

        },

        computed:{

            classObject:function(){

                return {

                     active:this.isActive && !this.error,

                    'text-danger':this.error && this.error.type === 'fatal'

                }

            }

        }

    });

</script>

(4)、绑定内联样式

Vue通过v-bind:style指令给dom元素绑定样式,v-bind:style看着非常像css,但它其实是一个Javascript对象.CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：

<body>

    <div id="pageIndex">

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

    </div>

</body>

<script type="text/javascript">

    var currentPage=new Vue({

        el:"#pageIndex",

        data:{

            activeColor: 'blue',

            fontSize: 30

        }

    });

</script>

上述语法虽然正确,但是直接绑定一个样式对象会更好,这会让模版更清晰:

<body>

    <div id="pageIndex">

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

    </div>

</body>

<script type="text/javascript">

    var currentPage=new Vue({

        el:"#pageIndex",

        data:{

            styleObject:{

                color: 'red',

                fontSize: '13px'

            }

        }

    });

</script>

同样的对象语法常常结合计算属性使用.

2、数组语法

(1)、普通用法

Vue提供了一种机制,可以把一个数组传递给v-bind:class,以应用一个class列表:

<body>

    <div id="pageIndex">

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

    </div>

</body>

<script type="text/javascript">

    var currentPage=new Vue({

        el:"#pageIndex",

        data:{

            activeClass:"active",

            errorClass:"text-danger"

        }

    });

</script>

(2)、数组语法中使用三元表达式切换列表中的class

如果你想根据条件切换列表中的class,可以使用三元表达式,Vue支持在数组语法中使用三元表达式.

<body>

    <div id="pageIndex">

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

    </div>

</body>

<script type="text/javascript">

    var currentPage=new Vue({

        el:"#pageIndex",

        data:{

            isActive:false,

            activeClass:"active",

            errorClass:"text-danger"

        }

    });

</script>

(3)、数组语法中嵌套对象语法

当有多个条件class时上面的在数组语法中使用三元表达式难免有点繁琐,所以这个时候可以在数组语法中嵌套对象语法,使代码尽可能的简洁,代码如下:

<body>

    <div id="pageIndex">

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

    </div>

</body>

<script type="text/javascript">

    var currentPage=new Vue({

        el:"#pageIndex",

        data:{

            isActive:true,

            activeClass:"active",

            errorClass:"text-danger"

        }

    });

</script>

(4)、绑定内联样式

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上,代码如下:

<body>

    <div id="pageIndex">

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

    </div>

</body>

<script type="text/javascript">

    var currentPage=new Vue({

        el:"#pageIndex",

        data:{

            baseStyles:{

                color:"blue"

            },

            overridingStyles:{

                background:"yellow"

            }

        }

    });

</script>

注:当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

3、多充值

从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

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

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex
。

Class与Style绑定的更多相关文章

  1. 关于vue.js中class与style绑定的学习

    练习代码: html: <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  2. Vue#Class 与 Style 绑定

    绑定HTMLCLASS 在我没看这之前,我觉得要写绑定class ,应该像绑定数据一样这么写 class ={{class-a}} 看官方教程时,不推荐这么写,推荐这样 v-bind:class=&q ...

  3. Vue中class与style绑定

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson07 一 用对象的方法绑定class 很简单,举个栗子: <!D ...

  4. Vue.2.0.5-Class 与 Style 绑定

    Class 与 Style 绑定 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼 ...

  5. Knockout.Js官网学习（style绑定、attr绑定）

    Style绑定 style绑定是添加或删除一个或多个DOM元素上的style值.比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar.(注:如果你不是应用style值而是应用CSS clas ...

  6. Style绑定

    目的 style绑定可以添加或者移除DOM元素的样式值.这非常有用,例如,当值为负数时将颜色变为红色. (注:如果要修改CSS整个类,请使用css绑定) <div data-bind=" ...

  7. Class 与 Style 绑定

    将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强.表达式结果的类型除了字符串之外,还可以是对象或数组. 绑定 HTML Class 对象语法 <div cla ...

  8. 前端MVC Vue2学习总结（三）——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定

    Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...

  9. 【Vue.js】vue基础： 3种Class和Style绑定语法

    凡是用到了v-bind,那就一定有变量的存在,下面是三种语法的展示: 1. 对象语法: v-bind:class="{active: isActive, 'text-danger': has ...

  10. Vue学习4：class与style绑定

    说明:有些部分我只是相当于做一个学习笔记,加强记忆之用.所以可能阅读性不是那么强.如果有参考我这类博客的人,那么请见谅. 代码如下: <!DOCTYPE html> <html la ...

随机推荐

  1. Can not issue data manipulation statements with executeQuery().

    这个错误提示是说无法发行sql语句到指定的位置 就是如图的两端代码的问题,excuteQuery是查询语句,而我要调用的是更新的语句,所以这样数据库很为难到底要干嘛,我实际的操作是要更新数据,所以把 ...

  2. HDU 5957 Query on a graph (拓扑 + bfs序 + 树剖 + 线段树)

    题意:一个图有n个点,n条边,定义D(u,v)为u到v的距离,S(u,k)为所有D(u,v)<=k的节点v的集合 有m次询问(0<=k<=2): 1 u k d:将集合S(u,k)的 ...

  3. Java解决高并发方案（帮助你我他）

           一个小型的网站,可以使用最简单的html静态页面就实现了,配合一些图片达到美化效果,所有的页面均存放在一个目录下,这样的网站对系统架构.性能的要求都很简单.随着互联网业务的不断丰富,网站 ...

  4. hdu1080 Human Gene Functions() 2016-05-24 14:43 65人阅读 评论(0) 收藏

    Human Gene Functions Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Oth ...

  5. OpenGl 中的基本数据类型

    OpenGl 中的基本数据类型 为了便于 OpenGL在各种平台上移植,OpenGL定义了自己的数据类型. 如果你愿意也可用这些数据类型对应的标准C的数据类型来替代.如OpenGL也定义 GLvoid ...

  6. 深入浅析Node.js单线程模型

    Node.js采用 事件驱动 和 异步I/O 的方式,实现了一个单线程.高并发的运行时环境,而单线程就意味着同一时间只能做一件事,那么Node.js如何利用单线程来实现高并发和异步I/O?本文将围绕这 ...

  7. Django：如何给文章列表添加图片

    思路: 使用ajax方式将图片和文本一起通过formData提交到后台,Django后台通过request.POST和request.FILES方式接收数据 1.前端代码 {% extends 'ba ...

  8. Create Index语句的Include作用

    在 SQL Server 2005 中,可以通过将非键列添加到非聚集索引的叶级别来扩展非聚集索引的功能.通过包含非键列,可以创建覆盖更多查询的非聚集索引.这是因为非键列具有下列优点: 它们可以是不允许 ...

  9. Dependency injection configurations into views in asp.net core

    本文展示如何在ASP.NET Core MVC Application Razor视图中注入和使用应用程序的配置信息. 将配置信息添加到appsettings.json中: { "Loggi ...

  10. 用MVC5+EF6+WebApi 做一个考试功能(六) 仓储模式 打造EF通用仓储类

    前言 年底工作比较忙,年度总结还没写,项目要上线,回老家过年各种准备.尤其是给长辈给侄子侄女准备礼物头都大了. 原来想年前先出一版能用的,我看有点悬了,尽量先把大体功能弄出来,扔掉一些,保证能考试,然 ...