Class与Style绑定

本文主要介绍如何使用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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

Go语言的标准输入-scan 和bufio

除了f mt 和 os ,我们还需要用到 bufio 来实现带缓冲输入(input)和输出(output)读取用户的输入数据 我们怎样读取用户从键盘(控制台)输...

50711
来自专栏飞扬的花生

JQuery常用方法总结

1.json的创建方式 <script> $(function () { //第一种 var my = new Peop...

2307
来自专栏liulun

riot.js教程【四】Mixins、HTML内嵌表达式

前文回顾 riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期; riot.js教程【二】组件撰写准则...

2807
来自专栏coding

2018年Go语言实战笔记2string字符串处理time时间处理指针strconv 类型转换rand 随机数函数几个实例

接触一门新语言,了解其语法结构,常用的包是必须的,同时也是无聊的。有过其他编程语言基础的同学,学习go的语法很简单,参照 go文档 过一遍就能对go的语法有大致...

911
来自专栏Coco的专栏

【深入浅出jQuery】源码浅析--整体架构

1423
来自专栏阮一峰的网络日志

CSS 变量教程

今年三月,微软宣布 Edge 浏览器将支持 CSS 变量。 这个重要的 CSS 新功能,所有主要浏览器已经都支持了。本文全面介绍如何使用它,你会发现原生 CSS...

34911
来自专栏更流畅、简洁的软件开发方式

[自定义服务器控件] 第二步:下拉列表框。

前面发了一个文本框的,这回发一个下拉列表框。 一般在写自定义控件之前都要考虑一下原来的控件(系统代的)有什么优缺点,有哪些功能是我想要的,但是自带的控件没有提...

3006
来自专栏我的博客

DOM基础知识

1.DOM介绍 DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话...

2974
来自专栏自由而无用的灵魂的碎碎念

转: 细说HTML元素的ID和Name属性的区别

可以说几乎每个做过Web开发的人都问过,到底元素的ID和Name有什么区别阿?为什么有了ID还要有Name呢?! 而同样我们也可以得到最classical的答案...

1203
来自专栏游戏杂谈

关于AS3的事件移除释疑

as3.0中的事件Event(位于包flash.events内,继承至Object,子类有…)

1032

扫码关注云+社区

领取腾讯云代金券