Problem and solution to the problem of class not taking effect on the page of vue project

Issue that the class on the vue project page does not take effect

The code is as follows. In the vue project, the page has a div with class c-ul, but my c-li style is not in the style in the browser. Why is this?

After some research, I found

1. My style is scoped, that is, the css style is only applied to my page called component1. Therefore, when mount, all elements of the page will be added with a custom attribute name by vue: similar to <div data-v-5e57fb82="" class="wrapper"></div>

2. But because my c-ul is conditional rendering, because it is 0 just now, this element will not be mounted in the dom tree. Therefore, the custom tag that does not have scoped will not be mounted when the dom is mounted.

3. This results in that there is no corresponding data-v-5e57fb82 attribute, so the style will not take effect.

<div class='wrapper'>
    <div v-if="" class="c-ul">
        This is alistList
    </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>

Solution

style deletes scoped and applies to the entire project. Then, even if the if condition is met, inserts a new element into the dom without the scoped custom attribute restrictions, c-ul can take effect. However, this method will make this set of css apply globally and will affect the element style of the same class name on other pages.(Recommended index 1 star)

Still scoped, adding the styles required by the v-if conditional rendering label to the inter-line style will definitely take effect, but if there are too many styles, the code will not be concise and beautiful.(Recommended index 2.5 stars)

Still scoped, take out the v-if conditional rendering label separately for judgment, add a layer of div, cannot use template, otherwise it will be invalid (this is the most convenient solution,Recommended index 3 stars！！！）

  <div v-if="==0" No addition hereclass='c-li',Only forv-if>
      <div class="c-li" >
        here it islist
      </div>
  </div>

It is still scoped, but v-if is not used for conditional rendering. Otherwise, there is no such tag in the dom for the first time, resulting in the style not taking effect. You can use v-show. The principle is that the tag of v-show will definitely be mounted in the dom, but the display is none. So since it is mounted in the DOM for the first time, when scoped adds a custom attribute to each DOM element, the c-ul element will also have this tag, so the corresponding c-ul style will take effect~ However, the condition of v-show must be true or false, which is different from v-if in syntax, and you need to deal with it yourself.(Recommended index 2 stars)

@click and class in v-html do not take effect

Solution to the problem that @click and class in the html tag in vue v-html does not take effect

The front-end uses v-html to parse and render the html tag and can be rendered successfully, but the click event cannot be triggered (vue does not parse and render it as a template for vue)

Click event solution

Change @click in the tag to onclick,

Increase

created(){
    = ;
},
methods: {
    //Click event in the tag    test() {
    },
}

Click event to trigger

class style not taking effect solution

1. Use >>> Penetration

2. Define a new style tag without scoped

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.