Merge pull request #101 from GuoXiCheng/dev-c

add conditional and list rendering md

src/.vitepress/sidebars/vue.yaml

@@ -25,6 +25,30 @@
                 link: /frontend/vue/template-syntax/style-binding#class-类样式绑定
               - text: style 内联样式绑定
                 link: /frontend/vue/template-syntax/style-binding#style-内联样式绑定
+          - text: 条件渲染
+            link: /frontend/vue/template-syntax/conditional-rendering
+            items:
+              - text: v-if-else
+                link: /frontend/vue/template-syntax/conditional-rendering#v-if-else
+              - text: template 上的 v-if
+                link: /frontend/vue/template-syntax/conditional-rendering#template-上的-v-if
+              - text: v-show
+                link: /frontend/vue/template-syntax/conditional-rendering#v-show
+              - text: v-if vs. v-show
+                link: /frontend/vue/template-syntax/conditional-rendering#v-if-vs-v-show
+          - text: 列表渲染
+            link: /frontend/vue/template-syntax/list-rendering
+            items:
+              - text: 基于数组的渲染
+                link: /frontend/vue/template-syntax/list-rendering#基于数组的渲染
+              - text: 基于对象的渲染
+                link: /frontend/vue/template-syntax/list-rendering#基于对象的渲染
+              - text: 基于范围的渲染
+                link: /frontend/vue/template-syntax/list-rendering#基于范围的渲染
+              - text: template 上的 v-for
+                link: /frontend/vue/template-syntax/list-rendering#template-上的-v-for
+              - text: v-for 与 v-if
+                link: /frontend/vue/template-syntax/list-rendering#v-for-与-v-if
       # - text: 核心概念
       #   items:
       #     - text: 模版语法

src/frontend/vue/template-syntax/conditional-rendering.md

@@ -0,0 +1,25 @@
+# 条件渲染
+
+## v-if-else
+
+<<< @/../projects/vue-sandbox/src/components/TemplateSyntax/ConditionalRenderIf.vue
+
+## template 上的 v-if
+
+如果需要条件性地渲染多个元素，可以将它们包装在一个 `<template>` 元素内，并使用 `v-if` 控制它们的显示。
+
+<<< @/../projects/vue-sandbox/src/components/TemplateSyntax/ConditionalRenderTemplate.vue
+
+## v-show
+
+`v-show` 指令与 `v-if` 类似，但不支持在 `<template>` 元素上使用，也不支持与 `v-else` 搭配使用。
+
+<<< @/../projects/vue-sandbox/src/components/TemplateSyntax/ConditionalRenderShow.vue
+
+## v-if vs. v-show
+
+`v-if` 是“真正的”按条件渲染，在切换条件时，区块内的事件监听器和子组件会被销毁并重建。并且在初次渲染条件为假值时，不会做任何事，只有在条件为真时才会渲染。
+
+`v-show` 无论条件如何，元素总是会被渲染，并且只是简单地基于 CSS 的 `display` 属性进行切换。
+
+综上所述，`v-if` 有更高的切换开销，而 `v-show` 有更高的初始渲染开销。所以，如果需要频繁切换，使用 `v-show` 较好；如果在运行时条件很少改变，使用 `v-if` 较好。

src/frontend/vue/template-syntax/list-rendering.md

@@ -0,0 +1,29 @@
+# 列表渲染
+
+## 基于数组的渲染
+
+<<< @/../projects/vue-sandbox/src/components/TemplateSyntax/ListRenderArr.vue
+
+## 基于对象的渲染
+
+<<< @/../projects/vue-sandbox/src/components/TemplateSyntax/ListRenderObj.vue
+
+## 基于范围的渲染
+
+v-for 可以直接接受一个整数值，表示渲染多少次，n 的初值从 1 开始。
+
+<<< @/../projects/vue-sandbox/src/components/TemplateSyntax/ListRenderN.vue
+
+## template 上的 v-for
+
+如果需要渲染多个元素，可以将它们包装在一个 `<template>` 元素内，并使用 `v-for` 来渲染一个包含多个元素的块。
+
+<<< @/../projects/vue-sandbox/src/components/TemplateSyntax/ListRenderTemplate.vue
+
+## v-for 与 v-if
+
+在同一个元素上使用 `v-if` 和 `v-for` 时，`v-if` 比 `v-for` 优先级更高，这意味着 `v-if` 将无法访问到 `v-for` 中的变量。
+
+推荐的做法是在外先包装一层 `<template>` 元素，在其上使用 `v-for`，然后在内部使用 `v-if`。
+
+<<< @/../projects/vue-sandbox/src/components/TemplateSyntax/ListRenderIf.vue