尝试使用 prop 有条件地将 css 应用于组件，但它不起作用

Question

.storyMobile{
color:green;
}
.storyWeb{
color:red;
}

<div class="storyMobile">
hii
</div>
<div class="storyWeb">
hii
</div>


//main view

  <div>
        <story   :story="stories[0]"/>
  </div>


//here it prints stories in red colour but I want it to be displayed in green colour - how can I do this?

这是我的组件，其中我有 2 个具有 2 个不同类别的 div，一个将用于移动设备，一个将用于网络。

<div class="storyMobile">
//code
</div>

 <div class="storyWeb">
//code
</div>

//这是我导入这个组件的主要视图

<div class="body-frame">
    <Header></Header>
    <section class="content-section-bar" v-if="stories && stories.length">

      <div>
        <story   :story="stories[0]"/>
      </div>
    </section>
</div>

默认情况下，故事组件位于网络中，因此“storyweb”类被应用到它，但我希望“storyweb”类被应用到它。

我在 vue.js 中应该怎么做我尝试使用 props 但没有得到想要的输出。

Answer 1

这是你想要的吗？

你的组件：

<div :class="className"></div>

脚本：

export default {
  props: {
    className: {
      default: 'storyWeb'
    }
  }
}

用法：

<story :story="stories[0]"/>
<story :story="stories[0]" class-name="storyMobile"/>

Vue.component('story',{
  template: `<div :class="className">test</div>`,
  props: {
    className: {
      type: String,
      default: 'storyWeb'
    },
    story: {
      type: Object,
      required: true
    }
  }
})

var app = new Vue({
  el: '#app',
  data () {
    return {
      stories: [
        {content: 'sotry1 content'},
        {content: 'story2 content'}
      ]
    }
  }
})

.storyMobile{
  color:green;
}
.storyWeb{
  color:red;
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <story :story="stories[0]" class-name="storyMobile"></story>
  <story :story="stories[1]"></story>
</div>