v-if: new case, v-if-else

App.vue

@@ -111,4 +111,11 @@
     padding: 5px 0;
     border-bottom: 1px solid #dfdfdf;
   }
+
+  .btn-view {
+    margin: 10px 0;
+    padding: 10px;
+    border: 1px solid #dfdfdf;
+    border-radius: 3px;
+  }
 </style>
\ No newline at end of file

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

@@ -6,20 +6,41 @@ describe('v-if', () => {
     page = await program.reLaunch(PAGE_PATH)
     await page.waitFor(500)
   })
-  it('show-hide-switch', async () => {
+  it('switch-v-if', async () => {
     const btn_view = await page.$('.view-click')
 
-    const elements1 = await page.$$('.hello')
-    expect(elements1.length).toBe(1)
+    const element1 = await page.$$('.v-if-show-value')
+    expect(element1.length).toBe(1)
 
     await btn_view.tap()
     await page.waitFor(50)
-    const elements2 = await page.$$('.hello')
-    expect(elements2.length).toBe(0)
+    const element2 = await page.$$('.v-if-show-value')
+    expect(element2.length).toBe(0)
 
     await btn_view.tap()
     await page.waitFor(50)
-    const elements3 = await page.$$('.hello')
-    expect(elements3.length).toBe(1)
+    const element3 = await page.$$('.v-if-show-value')
+    expect(element3.length).toBe(1)
+  })
+  it('switch-v-if-v-else-if-v-else', async () => {
+    const btn_view = await page.$('.view-click-abc')
+
+    const element_a = await page.$('.text-a')
+    expect(await element_a.text()).toBe('A')
+
+    await btn_view.tap()
+    await page.waitFor(50)
+    const element_b = await page.$('.text-b')
+    expect(await element_b.text()).toBe('B')
+
+    await btn_view.tap()
+    await page.waitFor(50)
+    const element_c = await page.$('.text-c')
+    expect(await element_c.text()).toBe('C')
+
+    await btn_view.tap()
+    await page.waitFor(50)
+    const element_not_abc = await page.$('.text-not-a-b-c')
+    expect(await element_not_abc.text()).toBe('Not A/B/C')
   })
 })
\ No newline at end of file

pages/directive/v-if/v-if.uvue

 <template>
   <view class="page">
     <view class="split-title">v-if</view>
-    <view class="view-click" @click="onShowOrHide">show/hide</view>
-    <view class="hello" v-if="show">hello</view>
+    <view class="btn-view view-click" @click="onShowOrHide">Switch v-if</view>
+    <view class="v-if-show-value" v-if="show">show value</view>
+
+    <view class="split-title">v-if-else</view>
+    <view v-if="type === 'A'">
+      <text class="text-a">A</text>
+    </view>
+    <view v-else-if="type === 'B'">
+      <text class="text-b">B</text>
+    </view>
+    <view v-else-if="type === 'C'">
+      <text class="text-c">C</text>
+    </view>
+    <view v-else>
+      <text class="text-not-a-b-c">Not A/B/C</text>
+    </view>
+    <view class="btn-view view-click-abc" @click="switchABC">Switch A/B/C</view>
   </view>
 </template>
 
 <script lang="ts">
+  let typeIndex = 0
+  const TypeList : Array<string> = ['A', 'B', 'C', 'D']
   export default {
     data() {
       return {
-        show: true
+        show: true,
+        type: 'A'
       }
     },
     methods: {
       onShowOrHide() {
         this.show = !this.show
+      },
+      switchABC() {
+        typeIndex++
+        if (typeIndex >= TypeList.length) {
+          typeIndex = 0
+        }
+
+        this.type = TypeList[typeIndex]
       }
     }
   }
 </script>
-
-<style>
-</style>

pages/directive/v-model/counter.uvue

 <template>
   <view>
-    <view>子组件-count的值是：{{number}}</view>
+    <view>child-component-count：{{number}}</view>
     <button type="default" @click="add">+1</button>
   </view>
 </template>
@@ -16,7 +16,7 @@
     emits: ['update:number'],
     methods: {
       add() {
-        this.$emit('update:number', this.number + 1)//子组件通过this.$emit()方法修改number值
+        this.$emit('update:number', this.number + 1)
       }
     }
   }

pages/directive/v-model/v-model.uvue

@@ -39,4 +39,4 @@
     border: 1px solid #ccc;
     border-radius: 5px;
   }
-</style>
\ No newline at end of file
+</style>