<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. new Thread(new ThreadStart(this.StartServer))

    Thread .new thUdpServer thUdpServer = new Thread(new ThreadStart(this.StartServer))

  2. fastestmirror不能使用

    fastestmirror不能使用,fastestmirror是yum的一个加速插件 处理办法就是禁用这个插件 方法两种 第一种 vi /etc/yum/pluginconf.d/fastestmir ...

  3. lodash forIn forOwn 遍历对象属性

    _.forIn(object, [iteratee=_.identity]) 使用 iteratee 遍历对象的自身和继承的可枚举属性. function Foo() { this.a = 1; th ...

  4. Linux下默认的目录介绍

    目录/文件 用途 来源 / /处于Linux文件系统树形结构的最顶端,它是Linux文件系统的入口,所有的目录.文件.设备都在/之下. - /bin 该目录存放着系统最常用的最重要的命令,相当于DOS ...

  5. WSDL接口数据传递以及外网发布需要注意的地方

    A系统传递数据给B系统 1.A创建asmx推送接口如下 using System; using System.Collection.Generic; using System.Data; using ...

  6. 26. Remove Duplicates from Sorted Array【easy】

    26. Remove Duplicates from Sorted Array[easy] Given a sorted array, remove the duplicates in place s ...

  7. python-class(3)

    #!/usr/bin/env python #-*- coding:utf-8 -*- ############################ #File Name: class3.py #Auth ...

  8. awk之随机函数rand()和srand()

    awk之随机函数rand()和srand() 分类: LINUX 文件: abcdefg ...... 现在想要随机抽取5列组成下面的内容,允许重复: cffab ...... awk -F '' ' ...

  9. jsdoc — js注释

    官方文档 http://usejsdoc.org/ - sublime插件 https://github.com/spadgos/sublime-jsdocs - 生成文档 生成html: (1)安装 ...

  10. iOS开发之多文件上传

    // //  ViewController.m //  B03-多文件上传 // //  Created by 0426iOS on 15/7/1. //  Copyright (c) 2015年 0 ...