vue之v-bind:style

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue之v-bind:style相关的知识，希望对你有一定的参考价值。

<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的主要内容，如果未能解决你的问题，请参考以下文章

04.vue-charp-04 v-bind及其class与style绑定

Vue 使用v-bind:style 绑定样式

Vue.js 使用自定义计算属性渲染 v-bind:style 背景图像 url 不起作用

Vue.js v-bind:style 伪元素 :: 在内容图标之后

手写vue中v-bind:style效果的自定义指令

[Vue] Update Attributes, Classes and Styles in Vue.js with v-bind