[英]Tried to apply css to a component conditionally using prop but its not working
.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中应该如何做。
是你想要的吗?
您的组件:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.