[Vue3全面测试]FlexDemo测试

<template>
  <div class="flex-demo">
    <div
      class="inner1"
      v-on:click="fn"
    >11</div>
    <div class="inner2">22</div>
    <div
      class="inner1"
      v-if="showCmd.bValue"
    >33</div>
    <div
      class="inner2"
      v-if="showCmd.bValue"
    >44</div>
  </div>
</template>
<script>
import { reactive, watch } from 'vue'
export default {
  name: 'FlexDemo',
  // eslint-disable-next-line space-before-function-paren
  setup() {
    const showCmd = reactive({
      bValue: false
    })
    // eslint-disable-next-line space-before-function-paren
    function fn() {
      showCmd.bValue = !showCmd.bValue
    }
    watch(() => showCmd.bValue, (newValue, oldValue) => {
      console.log('showCmd改变了')
      console.log(newValue)
      console.log(oldValue)
    })
    return {
      fn,
      showCmd
    }
  }
}
</script>
<style lang="scss" scoped>
.flex-demo {
  width: 400px;
  height: 400px;
  background-color: blue;
  display: flex;
  flex-direction: column;
  align-items: center;
  .inner1 {
    border: 5px solid red;
    flex: 1;
    width: 40px;
    height: 40px;
  }
  .inner2 {
    border: 5px solid red;
    flex: 2;
    width: 30px;
    height: 30px;
  }
}
</style>