尝试使用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个div，有2个不同的类，其中一个将为移动设备处于活动状态，另一个将在网络中处于活动状态。

<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中使用道具但是没有得到所需的输出。