From 2ab10e121923dedcbbc958d13c540531b5c300ff Mon Sep 17 00:00:00 2001 From: nguyenvanduocit Date: Thu, 17 Mar 2022 12:40:14 +0700 Subject: [PATCH 1/3] WIP: Fire in the house --- src/guide/essentials/list.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/guide/essentials/list.md b/src/guide/essentials/list.md index 03fcc73238..140c4e9815 100644 --- a/src/guide/essentials/list.md +++ b/src/guide/essentials/list.md @@ -1,9 +1,11 @@ -# List Rendering +# Render List ## `v-for` We can use the `v-for` directive to render a list of items based on an array. The `v-for` directive requires a special syntax in the form of `item in items`, where `items` is the source data array and `item` is an **alias** for the array element being iterated on: +Chúng ta có thể sử dụng `v-for` +
```js From de09772c535c95bc53f988249030105dde6bb3ba Mon Sep 17 00:00:00 2001 From: nguyenvanduocit Date: Thu, 17 Mar 2022 13:21:44 +0700 Subject: [PATCH 2/3] WIP: Fire in the house --- src/guide/essentials/list.md | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/src/guide/essentials/list.md b/src/guide/essentials/list.md index 140c4e9815..f83e3adc24 100644 --- a/src/guide/essentials/list.md +++ b/src/guide/essentials/list.md @@ -1,10 +1,8 @@ -# Render List +# Render danh sách ## `v-for` -We can use the `v-for` directive to render a list of items based on an array. The `v-for` directive requires a special syntax in the form of `item in items`, where `items` is the source data array and `item` is an **alias** for the array element being iterated on: - -Chúng ta có thể sử dụng `v-for` +Chúng ta có thể dùng chỉ thị `v-for` để render một danh sách các mục dựa trên một mảng. Chỉ thị `v-for` yêu cầu một cú pháp đặt biệt trong dạng `item in items`, với `items` là một mảng chứa dữ liệu và `item` là một **biệt danh** cho phần tử của mảng được lặp lại:
@@ -32,7 +30,7 @@ data() { ``` -Inside the `v-for` scope, template expressions have access to all parent scope properties. In addition, `v-for` also supports an optional second alias for the index of the current item: +Bên trong ngữ cảnh `v-for`, biểu thứ template có quyền truy cập vào tất cả thuộc tính trong ngữ cảnh cha của nó. Hơn nữa, `v-for` còn hỗ trợ một biểu thức phụ thuộc cho phần tử hiện tại của mảng:
@@ -84,6 +82,8 @@ const items = [{ message: 'Foo' }, { message: 'Bar' }] The variable scoping of `v-for` is similar to the following JavaScript: +Phạm vi giá trị của `v-for` cũng tương tự như trong đoạn JavaScript sau: + ```js const parentMessage = 'Parent' const items = [ @@ -99,6 +99,8 @@ items.forEach((item, index) => { Notice how the `v-for` value matches the function signature of the `forEach` callback. In fact, you can use destructuring on the `v-for` item alias similar to destructuring function arguments: +Để ý cách giá trị `v-for` khớp với hình thức của function callback của `forEach`. Thực ra, bạn có thể sử dụng cú pháp phân rã cho phần tử trong `v-for` tương tự như phân rã các tham số của function: + ```vue-html
  • {{ message }} @@ -112,6 +114,8 @@ Notice how the `v-for` value matches the function signature of the `forEach` cal For nested `v-for`, scoping also works similar to nested functions. Each `v-for` scope has access to parent scopes: +Ngữ cảnh củua các `v-for` lồng nhau cũng tương tự như các function lồng nhau. Mỗi ngữ cảnh của `v-for` có quyền truy cập vào ngữ cảnh cha của nó: + ```vue-html
  • @@ -122,6 +126,8 @@ For nested `v-for`, scoping also works similar to nested functions. Each `v-for` You can also use `of` as the delimiter instead of `in`, so that it is closer to JavaScript's syntax for iterators: +Bạn cũng có thể dùng `of` thay cho `in`, như vậy nó sẽ gần với cú pháp của JavaScript hơn: + ```vue-html
    ``` @@ -130,6 +136,8 @@ You can also use `of` as the delimiter instead of `in`, so that it is closer to You can also use `v-for` to iterate through the properties of an object. +Bạn cũng có thể sử dụng `v-for` để duyệt qua các thuộc tính của một object: +
    ```js @@ -167,6 +175,8 @@ data() { You can also provide a second alias for the property's name (a.k.a. key): +Bạn còn có thể cung cấp một alia thứ hai đại diện cho tên của thuộc tính (hay key): + ```vue-html
  • {{ key }}: {{ value }} From 064e24cd0d47ed12eef35f6958063faf58c90efa Mon Sep 17 00:00:00 2001 From: nguyenvanduocit Date: Thu, 17 Mar 2022 13:23:06 +0700 Subject: [PATCH 3/3] WIP: Fire in the house --- src/guide/essentials/list.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/guide/essentials/list.md b/src/guide/essentials/list.md index f83e3adc24..81c79895e5 100644 --- a/src/guide/essentials/list.md +++ b/src/guide/essentials/list.md @@ -185,6 +185,8 @@ Bạn còn có thể cung cấp một alia thứ hai đại diện cho tên củ And another for the index: +Và một cái khác cho index: + ```vue-html
  • {{ index }}. {{ key }}: {{ value }} @@ -204,6 +206,8 @@ And another for the index: :::tip Note When iterating over an object, the order is based on the enumeration order of `Object.keys()`, which isn't guaranteed to be consistent across JavaScript engine implementations. + +Khi duyệt qua một object, thứ tự được dựa trên thứ tự của tập `Object.keys()`, cái mà không chắc rằng sẽ thống nhất giữa các engine Javascript khác nhau. ::: ## `v-for` with a Range