From 56979be50ad9b7300bcda7dcdfdc6c9c6bc2f159 Mon Sep 17 00:00:00 2001 From: jaywcjlove Date: Tue, 11 Oct 2022 01:09:57 +0000 Subject: [PATCH] doc: update `vue2.md`. (#5) 878990a290b58d1ecfba06b0875c1e54c4011fc3 --- docs/vue2.html | 94 +++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 93 insertions(+), 1 deletion(-) diff --git a/docs/vue2.html b/docs/vue2.html index 9980f408..57951ae9 100644 --- a/docs/vue2.html +++ b/docs/vue2.html @@ -380,7 +380,99 @@ </h1>

带有 v-show 的元素始终会被渲染并保留在 DOM 中，只是简单地切换元素的 CSS 属性 display

-

Vue 2 API

+

列表渲染

+

v-for

+
<ul id="example-1">
+  <li
+    v-for="item in items"
+    :key="item.message">
+    {{ item.message }}
+  </li>
+</ul>
+
+
var example1 = new Vue({
+  el: '#example-1',
+  data: {
+    items: [
+      { message: 'Foo' },
+      { message: 'Bar' }
+    ]
+  }
+})
+
+

v-for 可选的第二个参数(索引)

+
<li v-for="(item, index) in items">
+  {{ index }}
+  {{ item.message }}
+</li>
+
+

如下 data

+
data: {
+  items: [
+    { message: 'Foo' },
+    { message: 'Bar' }
+  ]
+}
+
+

也可以用 of 替代 in 作为分隔符

+
<div v-for="item of items"></div>
+
+

v-for 使用对象

+ +
<li v-for="value in object">
+  {{ value }}
+</li>
+
+

如下 data

+
data: {
+  object: {
+    title: 'How to do lists in Vue',
+    author: 'Jane Doe',
+    publishedAt: '2016-04-10'
+  }
+}
+
+

渲染结果

+
How to do lists in Vue
+Jane Doe
+2016-04-10
+
+

提供第二个的参数为 property 名称 (也就是键名)

+
<div v-for="(value, name) in object">
+  {{ name }}: {{ value }}
+</div>
+
+

还可以用第三个参数作为索引

+
<div v-for="(value,name,index) in object">
+  {{ index }}. {{ name }}: {{ value }}
+</div>
+
+

v-for/v-if

+
<li
+  v-for="todo in todos"
+  v-if="!todo.isComplete"
+>
+  {{ todo }}
+</li>
+
+

只渲染未完成的 todo，下面加上 v-else 示例

+
<ul v-if="todos.length">
+  <li v-for="todo in todos">
+    {{ todo }}
+  </li>
+</ul>
+<p v-else>No todos left!</p>
+
+

组件上使用 v-for

+
<my-component
+  v-for="(item, index) in items"
+  v-bind:item="item"
+  v-bind:index="index"
+  v-bind:key="item.id"
+></my-component>
+
+

2.2.0+ 的版本里，当在组件上使用 v-for 时，key 现在是必须的

+

Vue 2 API 参考

全局配置