<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. C# 中 in,out,ref 的作用与区别

    In:过程不会改写In的内容 Out和out:传入的值不会被过程所读取,但过程可以写 ref:传入的值,过程会读,也会写 就象你把布料送到裁缝的一个收料箱(裁缝用这个区别是哪家客户) IN:这块布料, ...

  2. ASP.NET MVC之单元测试分分钟的事

    一.为什么要进行单元测试? 大部分开发者都有个习惯(包括本人在内),常常不喜欢去做单元测试.因为我们对自己写的程序总是盲目自信,或者存在侥幸心理每次运行通过后就直接扔给测试组的妹子们了.结果妹子一测, ...

  3. C指针解析 ------ 运算符&amp;和*

    本文是自己学习所做笔记,欢迎转载,但请注明出处:http://blog.csdn.net/jesson20121020 & 是取地址运算符.* 叫做指针运算符或间接运算符.&a 的运算 ...

  4. 【Datastage】NULL VALUE TO A NOT NULL VALUE

    使用ds是报错如上图: 造成这个问题的原因是: 在写SQL时候没有给字段别名与DS中对应一致 例如有下表: CREATE TABLE DataInfo( ID_1 ), ID_2 ) ) CREATE ...

  5. Oracle 和sqlserver 字符串补齐

    Oracle:Lpad函数 语法格式如下: lpad( string, padded_length, [ pad_string ] ) string 准备被填充的字符串: padded_length ...

  6. Android基于UDP的局域网聊天通信

    代码地址如下:http://www.demodashi.com/demo/12057.html 记得把这几点描述好咯:代码实现过程 + 项目文件结构截图 + 演示效果 1. 开发环境 1.1 开发工具 ...

  7. iBatis 使用总结

    http://blog.csdn.net/caihaijiang/article/details/6438633 --日期格式化 date_format(createtime,'%Y-%m-%d') ...

  8. JPA联合主键@EmbeddedId使用详解附查询例子

    花了2个小时的时间解决这个问题,网上资料太少,记录下     详情看源文件TBicPrmCompute,TBicPrmComputePK package com.isoftstone.core.dom ...

  9. C语言学习笔记（二） 基础知识

    数据类型 C语言数据可以分为两大类: 基本类型数据和复合类型数据: 基本类型数据 整数 整型   (int)  ——占4字节 短整型(short int)  ——占2字节    长整型(long in ...

  10. 【CODEFORCES】 C. Captain Marmot

    C. Captain Marmot time limit per test 1 second memory limit per test 256 megabytes input standard in ...