嘗試使用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>

默認情況下，故事組件位於Web中，因此“ storyweb”類將應用於它，但是我希望將“ storyweb”類應用於它。

我在嘗試使用道具但未獲得所需輸出的vue.js中應該如何做。

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>