vue项目，页面class不生效

代码如下，vue项目中，页面有一个class为c-ul的div,但是浏览器中style里没有我的c-li样式。这是为什么呢。研究一番之后发现：

1.我的style是scoped，也就是css样式仅应用于我的这个名为component1的页面。因此，在挂载的时候，页面的所有元素都会被vue加上一个自定义属性名：类似于这样的<div data-v-5e57fb82="" class="wrapper"></div>

2.但是因为我的c-ul是条件渲染，因为List.length刚上来是0，所以这个元素不会被挂载在dom树里，因此，就不具备scoped的自定义标签在dom挂载的时候并不会挂载，

3.因此导致了，没有对应的data-v-5e57fb82属性，所以样式不会生效。

<div class='wrapper'>
    <div v-if="List.length" class="c-ul">
        这是一个list列表
    </div>
</div>
<script>
export default {
  name: 'component1',
  data(){
    return{
      List:[]
    }
  },
</scropt>

<style scoped>
  
  .wrapper{
    background-color: #f4f4f4;
    height: 100vh;
    overflow-y:scroll;
    -webkit-overflow-scrolling:touch;
  }
  .c-ul{
    min-height: 100vh ;
  }
</style>

解决办法：

1.css style删除scoped,应用于整个项目，那么即便if条件满足之后，在dom中插入新的元素，没有scoped的自定义属性限制，c-ul就能够生效了。但是这个方法会使这套css应用于全局，会影响其他页面相同类名的元素样式。（推荐指数1颗星）

2.style仍然scoped，把v-if条件渲染标签需要的样式加在行间style里，就一定会生效，但是如果样式设置太多，则代码不简洁美观。（推荐指数2.5颗星）

3.style仍然scoped，把v-if条件渲染标签单独拎出来进行判断，加一层div，不能用template不然也会失效、（这个最方便解决，推荐指数3颗星！！！）

  <div v-if="List.length==0" 这里不加class='c-li',只用来v-if>
      <div class="c-li" >
        这里是list
      </div>
  </div>

4.style仍然scoped，但是不使用v-if来条件渲染，不然dom首次挂载中没有这个标签，导致样式不生效，可以使用v-show,原理是，v-show的标签一定会被挂载在dom中，只是display为none,那么既然他首次挂载在了DOM中，scoped给每个DOM元素加自定义属性的时候，这个c-ul元素也会有这个标识，那么对应的c-ul样式就会生效了~但是v-show的条件必须是true or false，语法上和v-if不同，需要你自己处理一下啦。（推荐指数2颗星）