使用 Vue.js 的动态样式文本颜色

Question

这段代码在 Angular 中

<div [style.color]="'#' + prod.id.substring(0,6)">
<small>{{ prod.id }}</small>
</div>

我需要用 vue.js 编写类似的代码。

Answer 1

您可以使用对象(键作为CSS属性，值作为CSS值(设置样式属性。

<div :style="{ color : '#' + prod.id.substring(0,6) }">
<small>{{ prod.id }}</small>
</div>

Answer 2

您可以使用3 种语法：

<div :style="{ color: '#' + prod.id.substring(0,6)}">
<small>{{ prod.id }}</small>
</div>

<div :style="`color: #${prod.id.substring(0,6)}`">
<small>{{ prod.id }}</small>
</div>

<div :style="'color: #' + prod.id.substring(0,6)">
<small>{{ prod.id }}</small>
</div>

注：:style等同于v-bind:style

参考： https://v2.vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1

<小时 />

演示：

new Vue({
el: '#app1',
data: { hex: '0f0' }
});

button {
width: 300px;
height: 100px;
font-size: 5rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app1">
<button :style="{ color: '#' + hex}">Button1</button>
<button :style="`color: #${hex}`">Button2</button>
<button :style="'color: #' + hex">Button3</button>
</div>