<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. linux c中select使用技巧——计时器(转）

    通过本文你会了解到: 1. select()原型及参数说明 2. select()应用情景 3. select()注意事项 4. select()作定时器 原型 int select(int nfds ...

  2. 网站相关技术探究keepalive_timeout（转）

    网站相关技术探究keepalive设多少: /proc/$PID/fd/$number  0:标准输入 1:标准输出 2:标准错误   Test: [root@KTQT ~]# ll /proc/12 ...

  3. 为 jquery validate 添加验证失败回调

    转载自:https://blog.csdn.net/huang100qi/article/details/52619227 1. jquery Validation Plugin - v1.15.1 ...

  4. ExCEL操作技巧集锦，持续更新

    1.格式刷 word里面格式化的快捷键很好用,但是excel里面的快捷键用不了,经百度得知: excel双击格式化按钮,可以开启连续应用格式刷模式,单击之后关闭,这样比快捷键好用多了,如下图

  5. shell脚本与mongo交互

    1.mongo提供*.js的方法供linux调用 #!/bin/bash /usr/local/mongodb/bin/mongo hostname/dbname xxx.js xxx.js 内容如下 ...

  6. 今日头条&58转转笔试

    昨天参加今日头条和58转转的笔试,因为时间上有冲突,所以主要选择参加头条的笔试. 先说头条: 头条的题型: 一道改错题 三道编程题 一道设计题 感受: 做题目的的时候还是有点紧张的,因为突然遇到题目需 ...

  7. c#中从string数组转换到int数组及比较两个字符串相等

    string[] input = { "1", "2", "3", "4", "5", " ...

  8. FileNotFoundException: http:\localhos46087125.jpg (文件名、目录名或卷标语法不正确

    java.io.FileNotFoundException: http:\localhost:8080\ipms\upload\1332146087125.jpg (文件名.目录名或卷标语法不正确.) ...

  9. RGB格式等比例缩放

    原理为:将原始图像的每个像素通过一个比例关系式映射到相应的位置. /* lrgb: input 24bits rgb buffer srgb: output 24bits rgb buffer wid ...

  10. PHP修改memory_limit的三种办法

     PHP修改memory_limit的三种办法 2010-06-11 10:57:11 分类: 可能是分词程序的问题.只要搜索的字段达到十个汉字以上,就会出现诸如以下的错误 Fatal error: ...