<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. 使用Visual Studio的动态连接库创建通用数据库连接对话框

    1.在VS(此处文件夹文件以vs2010为例)安装文件夹下("%Visual Studio安装文件夹%/Common10/IDE/Microsoft.Data.ConnectionUI.Di ...

  2. linux ipvsadm安装

    cd /usr/src/ wget http://www.linuxvirtualserver.org/software/kernel-2.6/ipvsadm-1.24-6.src.rpmrpm -i ...

  3. 也谈隐藏盘符等windows 的管理员的策略实现

    网上的文章都知道在HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Policies\Explorer 文件夹下有控制隐藏驱动器 ...

  4. 初识WatiN

    WatiN —— Web Application Testing In .Net 为什么会有WatiN? 给用户提供一个.Net平台下,将Web测试自动化的便捷途径. 如何通过WatiN来进行自动化测 ...

  5. 【HDU-5246】超级赛亚ACMer（贪心）

    之前用了个nlogn的算法超时了.仅仅能改成n的算法了 大题贪心思路就是 对每一个人的能力值从小到大进行排序,当前能力值为now,那么我们找到一个人的能力使得这个能力值 <= now.now + ...

  6. cmpp 短信平台

    背景: 物联网一般是在设备上安装sim卡,通过2g网络来进行设备与云端系统的交互,网络都是通过移动的基站来进行网络传输的,所以一旦移动的基站有变动,比如流量降级,光缆割接,其他故障登 都会导致2g络的 ...

  7. crontab用法

    在工作中有时需要定时执行某些操作,于是想到使用crontab来实现 crontab的用法: crontab file [-u user]    用指定的文件替代目前的crontab crontab - ...

  8. Painting Fence

    Painting Fence Time Limit:1000MS     Memory Limit:524288KB     64bit IO Format:%I64d & %I64u Sub ...

  9. 高分辨率转HTML成PDF（ephtmltopdf.dll）

    今天看到园友分享的 wkhtmtopdf--高分辨率转HTML成PDF(三) 想起我做 一键保存网页为PDF_V1.2 的时候,也研究过一段时间这个,一开始也看的是wkhtmltopdf,不过发现wk ...

  10. mount rootfs

    主要用到的命令为pivot_root,可man 8 pivot_root了解用法. 1. pivot_root - change the root filesystem pivot_root new_ ...