<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. Quartz与Spring的整合使用

    之前说到过Quartz的基本使用(猛戳这里看文章).在实际使用中,我们一般会将定时任务交由spring容器来管理.所以今天我们来说说Quartz与spring的整合. 咱们还是依照Quartz的三大元 ...

  2. 右键添加在siblime中打开选项

    siblime text安装完成之后没有右键打开的快捷方式,对于开发者来说每次用siblime打开文件比较繁琐. 下面教程可以让大家解决这个问题 首先点击开始--运行,输入regedit,(win7系 ...

  3. shell学习小结

    小结 本章我么介绍了怎样使用ls与stat露出文件与文件meta数据,还有怎样使用touch设置未见时间戳.touch可显示有关日期时间相关的信息以及在很多现行系统上的范围限制. 说明了怎样以shel ...

  4. CSAPP:异常控制流

    在一般的情况下,处理器处理的指令序列是相邻的(顺序执行). 异常控制流提供了指令的跳转,它一部分是由硬件实现的,一部分是由操作系统实现的. 异常处理 在系统启动时,操作系统分配和初始化一张称为异常表的 ...

  5. Bootstrap组件之导航

    .nav--指定列表元素为导航组件. .nav-tabs--指定导航组件的样式为标签页: .nav-pills--指定导航组件的样式为胶囊式标签页: .nav-stacked--指定标签页的样式为垂直 ...

  6. ucosii任务切换OS_TASK_SW()

    stm32F103中任务切换定义 //任务切换宏,由汇编实现. #define OS_TASK_SW() OSCtxSw() os_cpu_a.asm中任务切换函数的定义 NVIC_INT_CTRL ...

  7. Linux selinux关闭方法和防火墙关闭方法

    在Linux下设置selinux有三种方法.一.在图形界面中:    桌面-->管理-->安全级别和防火墙,设置为disable.二.在命令模式下:    修改文件:/etc/selinu ...

  8. Failed to load http://localhost:8080/team.php: Request header field x-jwt-header is not allowed by Access-Control-Allow-Headers in preflight response.

    axios 加入header之后,请求出现 Failed to load http://localhost:8080/team.php: Request header field x-jwt-head ...

  9. 利用python拼接图片

    问题描述: 将16张图片拼接成4x4的图片, 且不改变每单张图片的像素值. 代码如下: import os from PIL import Image path = '/share1/home/con ...

  10. VS项目名称修改

    阅读数:11141 VS中新建一个项目,如果开发工作都接近尾声,客户来要求更换项目的名称,差不多要变更整个解决方案中项目名称,引用等等,这个工作量还是很大的.上网搜索解决方法,还实验了专门的修改项目名 ...