首页 > 其他 > 详细

Class与Style绑定

时间:2017-11-11 18:14:32      阅读:173      评论:0      收藏:0      [点我收藏+]

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

 

Class与Style绑定

原文:http://www.cnblogs.com/GreenLeaves/p/7819571.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!