Vue.js 上样式值的条件

Question

我想检查我的模板的值

        <template slot="projected_end_date" slot-scope="{ line }">
            <datetime-display :value="line.projected_end_date"
                              type="date"
            style= "color: red"></datetime-display>
         </template>

并且仅当我的值小于当前日期时才将样式设置为红色。有什么建议吗？我假设它应该是这样的

value > DateHelper.now()? style = ...

Answer 1

可以像这样使用类和样式绑定：

:style="value < DateHelper.now() ? { 'color': 'red'} : ''"

或

:style="{color: value < DateHelper.now() ? 'red' : 'inherit'}"

或一些默认颜色：

:style="{color: value < DateHelper.now() ? 'red' : 'black'}"

<小时 />

但我建议你尽可能使用类绑定：

:class="{warning: value < DateHelper.now()}"

在你的 css 样式中：

.warning {
   color: red;
}

此外，您可以简单地使用 Date.now(( 而不是帮助程序函数。

Answer 2

查看类和样式绑定

您可以像这样使用它：

<div :class="{'my-class': myCondition}">

简单示例

new Vue({
  el: '#app',
  data: {
    selectedColor: 'red'
  }
})

.red { background: red}
.blue { background: blue}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <button @click="selectedColor='red'">Red</button>
  <button @click="selectedColor='blue'">Blue</button>
  <p :class="{red: selectedColor === 'red', blue: selectedColor === 'blue'}">the background color will change !</p>
</div>