Class与Style绑定

Posted 2020-10-14 Green.Leaf

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

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

 

1、绑定Class

可以通过v-bind:class一个对象,以动态的切换class,代码如下:

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

js代码如下:

    var currentPage=new Vue({
        el:"#tDiv", //指定绑定的目标dom元素的Id
        //绑定数据源
        data: {
            isActive: true,
            hasError: false
        }
    });