Vue.js中用Prop为组件条件应用CSS类失败，求解决方案

这问题其实很常见，咱们一步步来搞定它——核心就是通过Prop传递状态，再在组件内部用动态绑定来控制CSS类的应用。

第一步：给story组件定义控制状态的Prop #

首先在你的story组件里，新增一个用来标记设备类型的Prop，比如isMobile，布尔类型，默认值设为false（对应默认的web端红色样式）。然后用Vue的动态class语法来绑定对应的类，这样就不用写两个重复的div啦：

<template>
  <!-- 动态绑定class：如果isMobile为true就用storyMobile，否则用storyWeb -->
  <div :class="isMobile ? 'storyMobile' : 'storyWeb'">
    <!-- 这里放你的组件内容，比如story的标题、内容等 -->
    {{ story.title }}
    {{ story.content }}
  </div>
</template>

<script>
export default {
  props: {
    // 接收父组件传递的story数据
    story: {
      type: Object,
      required: true
    },
    // 新增的设备状态Prop
    isMobile: {
      type: Boolean,
      default: false // 默认显示web端红色样式
    }
  }
}
</script>

<style scoped>
.storyMobile{ color:green; } 
.storyWeb{ color:red; }
</style>

第二步：在父组件中传递Prop控制样式 #

现在回到你的主视图，只要给story组件传递:is-mobile="true"，就能让它显示绿色的移动端样式了：

<div class="body-frame"> 
  <Header></Header> 
  <section class="content-section-bar" v-if="stories && stories.length"> 
    <div> 
      <!-- 传递isMobile Prop，强制显示移动端绿色样式 -->
      <story :story="stories[0]" :is-mobile="true"/> 
    </div> 
  </section> 
</div>

可选：自动根据屏幕尺寸切换（进阶） #

如果不想手动传值，而是要自动根据设备屏幕大小切换，可以在父组件里监听窗口尺寸，自动判断设备类型：

<template>
  <div class="body-frame"> 
    <Header></Header> 
    <section class="content-section-bar" v-if="stories && stories.length"> 
      <div> 
        <!-- 传递自动判断的isMobile状态 -->
        <story :story="stories[0]" :is-mobile="isMobile"/> 
      </div> 
    </section> 
  </div>
</template>

<script>
export default {
  data() {
    return {
      stories: [], // 你的stories数据源
      isMobile: false
    }
  },
  mounted() {
    // 初始化时判断一次设备
    this.checkDeviceType()
    // 监听窗口大小变化，实时更新设备状态
    window.addEventListener('resize', this.checkDeviceType)
  },
  beforeUnmount() {
    // 组件销毁前移除监听，避免内存泄漏
    window.removeEventListener('resize', this.checkDeviceType)
  },
  methods: {
    checkDeviceType() {
      // 这里可以自定义移动端的阈值，比如768px
      this.isMobile = window.innerWidth < 768
    }
  }
}
</script>

为什么之前的方法没生效？ #

你之前的组件里是固定渲染了两个分别带有storyMobile和storyWeb的div，不管父组件传什么Prop，web端的div都会一直显示，所以默认是红色。现在通过动态绑定class或者条件渲染，就能根据Prop的状态来决定应用哪个样式，自然就能切换颜色啦。

内容的提问来源于stack exchange，提问作者user9563422