时间戳

首页 > 解决方案 > 如何在 Vue.js 中添加条件样式？

css - 如何在 Vue.js 中添加条件样式？

问题描述

我想在我的组件中添加条件样式。我的组件如下：

    <site-pricing
        color="primary"
        currency="$"
        price="25"
        to="/purchase"
>
        <template v-slot:title>Complete</template>
        <template v-slot:desc>{{ $t('plans.completeDesc' )}}</template>
        <template v-slot:planSuffix>/ {{ $t('plans.oneTime' )}}</template>
        <template v-slot:features>
          <ul>
            <li>{{ $t('plans.xchats', [ 200 ] )}}</li>
            <li>{{ $t('plans.sDomain' )}}</li>
          </ul>
        </template>
        <template v-slot:footer>{{ $t('plans.oneTime' )}}</template>
</site-pricing>

我想添加一个特殊的样式，就像'color = primary'，然后添加一个border-top：5px red ...

标签： cssvue.js

解决方案

您应该为 vue 使用条件样式绑定。我将展示一个例子：

new Vue({
  el: '#app',
  data: {
    color: "secondary"
  },
  methods: {
    toggleColor(val) {
      this.color = val
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div :style="[color==='primary' ? {color: 'red'} : {color: 'blue'}]">Primary</div>
<div :style="[color==='secondary' ? {color: 'red'} : {color: 'blue'}]">Secondary</div>
<button @click="(e) => toggleColor('primary')">Switch to pirmary</button>
<button @click="(e) => toggleColor('secondary')">Switch to secondary</button>
</div>

推荐阅读