feat(v-show): 补充 v-show & display:flex 示例及测试 issue:11473

pages/directive/v-show/v-show-composition.uvue

 <template>
   <view class="page">
     <button id="toggle-btn" @click="toggleShow">toggle show/hide</button>
-    <view class="mt-10" id="v-show-element" v-show="dataInfo.show">
-      点击上方按钮，切换显示/隐藏
-    </view>
+    <text>点击上方按钮，切换下方 view 显示/隐藏</text>
+    <text>show default true: {{dataInfo.showDefaultTrue}}</text>
+    <view class="mt-10 default-true" id="v-show-element-default-true" v-show="dataInfo.showDefaultTrue"></view>
+    <text>show default false: {{dataInfo.showDefaultFalse}}</text>
+    <view class="mt-10 default-false" id="v-show-element-default-false" v-show="dataInfo.showDefaultFalse"></view>
   </view>
 </template>
 
 <script setup lang="uts">
 type DataInfo = {
-  show: boolean
+  showDefaultTrue : boolean
+  showDefaultFalse : boolean
 }
 
 const dataInfo = reactive({
-  show: true
+  showDefaultTrue: true,
+  showDefaultFalse: false
 } as DataInfo)
 
 const toggleShow = () => {
-  dataInfo.show = !dataInfo.show
+  dataInfo.showDefaultTrue = !dataInfo.showDefaultTrue
+  dataInfo.showDefaultFalse = !dataInfo.showDefaultFalse
 }
 
 defineExpose({
   dataInfo
 })
 </script>
+
+<style>
+  .default-true,
+  .default-false{
+    display: flex;
+    width: 100px;
+    height: 50px;
+  }
+  .default-true {
+    background-color: greenyellow;
+  }
+  .default-false {
+    background-color: antiquewhite;
+  }
+</style>
\ No newline at end of file

pages/directive/v-show/v-show-options.uvue

-<template>
-  <view class="page">
-    <button id="toggle-btn" @click="toggleShow">toggle show/hide</button>
-    <view class="mt-10" id="v-show-element" v-show="dataInfo.show">
-      点击上方按钮，切换显示/隐藏
-    </view>
-  </view>
-</template>
-
-<script lang="uts">
-type DataInfo = {
-  show: boolean
-}
-
-export default {
-  data() {
-    return {
-      dataInfo: {
-        show: true
-      } as DataInfo
-    }
-  },
-  methods: {
-    toggleShow() {
-      this.dataInfo.show = !this.dataInfo.show
-    }
+<template>
+  <view class="page">
+    <button id="toggle-btn" @click="toggleShow">toggle show/hide</button>
+    <text>点击上方按钮，切换下方 view 显示/隐藏</text>
+    <text>show default true: {{dataInfo.showDefaultTrue}}</text>
+    <view class="mt-10 default-true" id="v-show-element-default-true" v-show="dataInfo.showDefaultTrue"></view>
+    <text>show default false: {{dataInfo.showDefaultFalse}}</text>
+    <view class="mt-10 default-false" id="v-show-element-default-false" v-show="dataInfo.showDefaultFalse"></view>
+  </view>
+</template>
+
+<script lang="uts">
+  type DataInfo = {
+    showDefaultTrue : boolean
+    showDefaultFalse : boolean
+  }
+
+  export default {
+    data() {
+      return {
+        dataInfo: {
+          showDefaultTrue: true,
+          showDefaultFalse: false
+        } as DataInfo
+      }
+    },
+    methods: {
+      toggleShow() {
+        this.dataInfo.showDefaultTrue = !this.dataInfo.showDefaultTrue
+        this.dataInfo.showDefaultFalse = !this.dataInfo.showDefaultFalse
+      }
+    }
+  }
+</script>
+
+<style>
+  .default-true,
+  .default-false{
+    display: flex;
+    width: 100px;
+    height: 50px;
+  }
+  .default-true {
+    background-color: greenyellow;
   }
-}
-</script>
+  .default-false {
+    background-color: antiquewhite;
+  }
+</style>
\ No newline at end of file

pages/directive/v-show/v-show.test.js

@@ -6,23 +6,29 @@ describe('v-show', () => {
   
   const test = async (page) => {
     let dataInfo = await page.data('dataInfo')
-    expect(dataInfo.show).toBe(true)
-    
-    const vShowElement = await page.$('#v-show-element')
-    expect(await vShowElement.style('display')).toBe('flex')
+    expect(dataInfo.showDefaultTrue).toBe(true)
+    expect(dataInfo.showDefaultFalse).toBe(false)
     
+    const vShowElementDefaultTrue = await page.$('#v-show-element-default-true')
+    expect(await vShowElementDefaultTrue.style('display')).toBe('flex')
+    const vShowElementDefaultFalse = await page.$('#v-show-element-default-false')
+    expect(await vShowElementDefaultFalse.style('display')).toBe('none')
 
     const toggle = await page.$('#toggle-btn')
     await toggle.tap()
     
     dataInfo = await page.data('dataInfo')
-    expect(dataInfo.show).toBe(false)
-    expect(await vShowElement.style('display')).toBe('none')
+    expect(dataInfo.showDefaultTrue).toBe(false)
+    expect(dataInfo.showDefaultFalse).toBe(true)
+    expect(await vShowElementDefaultTrue.style('display')).toBe('none')
+    expect(await vShowElementDefaultFalse.style('display')).toBe('flex')
     
     await toggle.tap()
     dataInfo = await page.data('dataInfo')
-    expect(dataInfo.show).toBe(true)
-    expect(await vShowElement.style('display')).toBe('flex')
+    expect(dataInfo.showDefaultTrue).toBe(true)
+    expect(dataInfo.showDefaultFalse).toBe(false)
+    expect(await vShowElementDefaultTrue.style('display')).toBe('flex')
+    expect(await vShowElementDefaultFalse.style('display')).toBe('none')
   }
   
   it('v-show options API', async () => {