<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. POJ 3083：Children of the Candy Corn（DFS+BFS）

    Children of the Candy Corn Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 9311 Accepted: ...

  2. 你是那种仅仅看《XXXXX从入门到精通》的程序猿吗?

    我一開始又要废话一番了. 实际上上了大学以后.你常常会在网上,在和别人的交流里,在老师的课堂上.反复听到一些书,比方黄仁宇的<万历十五年>.王小波"时代三部曲".村上春 ...

  3. mac重置蓝牙模块

    升级系统后蓝牙鼠标无法连接,蓝牙模块也无法关闭,通过重置 PRAM和SMC解决 PRAM 重置 关机,拔掉所有外设,接上电源. 启动时同时按住 Command, Option, p, r , 听到三次 ...

  4. PHP中单引号双引号使用原则

    PHP中单引号双引号使用原则   1.PHP中尽量用单引号,HTML代码全部用双引号   2.在包含变量的时候,用双引号可以简化操作   3.复杂的情况下用大括号包起来   4 PHP引号还有一个用处 ...

  5. 挖一挖C#中那些我们不经常使用的东西之系列（1）——ToDictionary,ToLookup

    这个系列我们看看C#中有哪些我们知道.可是又不知道怎么用.又或者懒得去了解的东西,比方这篇我们要介绍的toDictionary 和ToLookup. 从图中我们看到有四个ToXXX的方法,当中ToAr ...

  6. pat(B) 1037. 在霍格沃茨找零钱(水题)

    代码: #include<cstdio> #include<iostream> #include<cstring> #include<algorithm> ...

  7. Python 的错误和异常处理

    语法错误 Python 的语法错误或者称之为解析错,如下: >>> while True print('Hello world') File "<stdin>& ...

  8. linux 进入 GNOME X 界面

    CentOS 安装Gnome CentOSVmwareLinuxBlogHTML  刚开始装系统的时候,没有选Gnome或者KDE,现在想装个玩玩. 简单的安装可以参考这个:http://huruxi ...

  9. 怎样优雅的研究 RGSS3 番外（一） ruby 实现的后缀自己主动机

    *我真的不会 ruby 呀* #encoding:utf-8 #==================================================================== ...

  10. Matlab中使用Java api画图图形并保存为jpeg格式

    直接上代码: close all; import java.io.*; import java.awt.*; import java.awt.image.BufferedImage; import j ...