<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. 【BIEE】15_时间维度建立

    时间维度的建立 1.环境准备 ①新建时间维度表:TIME_DIMENSION 建立时间维度表并插入数据 ---------------创建时间维度表 create table TIME_DIMENSI ...

  2. iOS 转盘动画效果实现

    代码地址如下:http://www.demodashi.com/demo/11598.html 近期公司项目告一段落,闲来无事,看到山东中国移动客户端有个转盘动画挺酷的.于是试着实现一下,看似简单,可 ...

  3. asp.net+mvc+easyui+sqlite 简单用户系统学习之旅—— 摘要

    首次接触asp.net开发,希望把自己的学习之旅写下来,一方面做个知识归纳技术总结,另一方面开放到博客中,和大家一起交流学习! asp.net是目前流行的web开发技术之一,是微软旗下开发的基于.ne ...

  4. MongoDB查询经典方式

    原文地址:http://www.cnblogs.com/stephen-liu74/archive/2012/08/03/2553803.html 1.  基本查询:    构造查询数据.    &g ...

  5. 转MQTT SERVER 性能测试报告

    硬件环境: 内存4G CPU4核 SERVER及端口: apollo端口 61619 mosquitto:端口 1884 activeMQ端口:1883 emqtt 端口1885 测试方法 并发测试: ...

  6. mysql select *... where id in (select 字符串 from ... )查询结果问题？

    SQL中的写法为 ); 查询结果为: id TypeName 1 新手 2 手机 在MYSQL中 ); 查询结果为: id TypeName 1 新手 少了一条数据. 其中 查询结果为 Newcard ...

  7. .net Lock用法(转)

    lock就是把一段代码定义为临界区,所谓临界区就是同一时刻只能有一个线程来操作临界区的代码,当一个线程位于代码的临界区时,另一个线程不能进入临界区,如果试图进入临界区,则只能一直等待(即被阻止),直到 ...

  8. 自己实现strcpy函数

    #include //printf #include //ssert #include //malloc #include //strlen char * sstrcpy(char * strdst, ...

  9. java - day07 - PrimeNum

    判断质数 package day06; import java.util.Scanner; //验证质数 public class primeNum { public static void main ...

  10. OC-7-内存管理

    课程要点: 内存管理的必要性 MRC(手动管理) 自动释放池 ARC是怎么对内存进行管理的 内存管理的必要性 OC是一门面向对象的语言,在软件运行过程中会创造大量的对象,每创建一个对象系统就会给其分配 ...