<div class="collect" @click="collected=!collected">

  <i class="fa fa-heart" :style="{'color': collected ?'rgb(240, 20, 20)':'rgb(147, 153, 159)'}"></i>

  <span class="text" :style="{'color': collected ?'rgb(77, 85, 93)':'rgb(147, 153, 159)'}">{{collected?'已收藏':'收藏'}}</span> 
</div>

vue之v-bind:style的更多相关文章

  1. vue 内联样式style中的background

    在我们使用vue开发的时候   有很多时候我们需要用到背景图 这个时候会直接使用 内联样式 直接把你拿到的数据拼接上去 注意  在vue中直接使用style时 花括号一定别忘记 还有就是你的url一定 ...

  2. v - bind

    1. 用于处理html标签的动态属性,即动态赋值(动态地绑定一个或多个特性,或一个组件 prop 到表达式) 2. 官网API <!DOCTYPE html> <html lang= ...

  3. Vue中class与style绑定

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

  4. 前端框架之Vue(4)-Class与Style绑定

    操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错.因此,在将  ...

  5. Vue入门---属性、style和class绑定方法

    一 .用对象的方法绑定class <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  6. vue基础——Class与Style绑定

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

  7. vue - 绑定css、style

    1.绑定html css1.1对象语法: 传给 v-bind:class 一个对象,以动态地切换 class <div v-bind:class="{ active: isActive ...

  8. vue基础---Class 与 Style 绑定

    [一]绑定HTML Class (1)对象语法 ①普通绑定class <div id="area" v-bind:class="className"> ...

  9. VUE：class与style强制绑定

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. vue 多种方式控制style属性

    一共用到了两种方式: 第一种:对象 第二种:数组 看代码: <!doctype html> <html lang="en"> <head> &l ...

随机推荐

  1. hdu1236 排名（结构体排序）

    排名 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submiss ...

  2. Java 内部类种类及使用解析【转】

    内部类Inner Class 将相关的类组织在一起,从而降低了命名空间的混乱. 一个内部类可以定义在另一个类里,可以定义在函数里,甚至可以作为一个表达式的一部分. Java中的内部类共分为四种: 静态 ...

  3. 移动负载均衡技术（MBL）

    移动负载均衡技术(MBL)   转至元数据结尾 附件:5 被admin添加,被admin最后更新于四月 27, 2015 转至元数据起始 互联网技术发展到今天,已经进入移动时代,很多在传统CS和BS的 ...

  4. 使用swap 清空vector

    //最简单的使用swap,清除元素并回收内存 vector <int>().swap(vecInt); //清除容器并最小化它的容量, // vecInt.swap(vector<i ...

  5. GEEK学习笔记— —程序猿面试宝典笔记（三）

    所谓笔记,就是比較个人的东西,把个人认为有点意思的东西记录下来~~ 程序猿面试宝典笔记(一)基本概念 程序猿面试宝典笔记(二)预处理.const和sizeof 程序猿面试宝典笔记(三)auto_ptr ...

  6. SQLServer 存储过程中不拼接SQL字符串实现多条件查询

    以前拼接的写法 set @sql=' select * from table where 1=1 ' if (@addDate is not null) set @sql = @sql+' and a ...

  7. composer 初始化办法和方法

    php -r "readfile('https://getcomposer.org/installer');" > composer-setup.php php -r &qu ...

  8. bonjour的使用

    os中,bonjour是一个零配置的网络服务分发服务器与客户端.   在使用bonour之前你应该明白的是,bonjour并不负责数据传输,只负责发布服务与检索服务,并在客户端获取服务端的信息.   ...

  9. android属性动画之ValueAnimator

    楼主前段时间做一个android项目,其中一个需求是需要制作一个动画,但是之前楼主没接触过android动画,所以在网上搜了下,并且也有人推荐可以试下用属性动画,所以我就百度了下属性动画怎么用,并顺便 ...

  10. Hibernate每个子类一张表（使用XML文件）实例

    在每个子类一张表的情况下,子类映射表与主键和外键关系与父类映射表相关. 类的<joined-subclass>元素用于使用主键和外键关系将子类与父对象进行映射. 在这个例子中,我们将使用h ...