Why does this happen when vue pseudo-class selectors are used in conjunction with v-if?

Why does a tag show the background color of the tag after it is styled with a pseudo-class selector and then false is set by v-if?
this won"t happen if you use v-show or style it with class without a pseudo-class selector.
isn"t v-if really destroying and rendering? Why is that? Why is this not the case even when styling with class?
is this the cause of the vue or the pseudo-class selector? I"ve tried both last-child and first-child. The code is like this. Below, you can try

. 
<template>
 <div>
  <div id="father">
    <div v-if="false" class="test">aaa</div>
    <div>bbb</div>
  </div>
 </div>
</template>

<script>
</script>

<style scoped>
-sharpfather div:first-child{width: 100px;height: 100px;background-color: -sharpccc}
</style>
Vue.js
Mar.30,2022

because the aaa div does not exist when using v-if, which causes the bbb div to become the first, and finally the first-child takes effect on the bbb div

if you use v-show, the div of aaa is only hidden, but actually exists, so first-child is effective on the div of aaa, so you can't see it.

Previous: The problem of vertical centering of pictures of unknown height?

Next: May I ask axios, how to encrypt the api interface at the front end?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu