<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>
