docs: translate file src/guide/essentials/conditional.md (#19)

Author: phnamdev

Diff for: src/guide/essentials/conditional.md

@@ -1,4 +1,4 @@
-# Conditional Rendering
+# Render theo điều kiện
 
 <script setup>
 import { ref } from 'vue'
@@ -7,15 +7,15 @@ const awesome = ref(true)
 
 ## `v-if`
 
-The directive `v-if` is used to conditionally render a block. The block will only be rendered if the directive's expression returns a truthy value.
+Directive `v-if` dùng để render theo điều kiện một khối (block). Khối chỉ được render nếu biểu thức của directive trả về một giá trị đúng (truthy).
 
 ```vue-html
 <h1 v-if="awesome">Vue is awesome!</h1>
 ```
 
 ## `v-else`
 
-You can use the `v-else` directive to indicate an "else block" for `v-if`:
+Bạn có thể sử dụng directive `v-else` để chỉ ra một "khối else" cho `v-if`:
 
 ```vue-html
 <button @click="awesome = !awesome">Toggle</button>
@@ -32,20 +32,20 @@ You can use the `v-else` directive to indicate an "else block" for `v-if`:
 
 <div class="composition-api">
 
-[Try it in the Playground](https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiB9IGZyb20gJ3Z1ZSdcblxuY29uc3QgYXdlc29tZSA9IHJlZih0cnVlKVxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGJ1dHRvbiBAY2xpY2s9XCJhd2Vzb21lID0gIWF3ZXNvbWVcIj50b2dnbGU8L2J1dHRvbj5cblxuXHQ8aDEgdi1pZj1cImF3ZXNvbWVcIj5WdWUgaXMgYXdlc29tZSE8L2gxPlxuXHQ8aDEgdi1lbHNlPk9oIG5vIPCfmKI8L2gxPlxuPC90ZW1wbGF0ZT4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL3NmYy52dWVqcy5vcmcvdnVlLnJ1bnRpbWUuZXNtLWJyb3dzZXIuanNcIlxuICB9XG59In0=)
+[Chạy thử](https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiB9IGZyb20gJ3Z1ZSdcblxuY29uc3QgYXdlc29tZSA9IHJlZih0cnVlKVxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGJ1dHRvbiBAY2xpY2s9XCJhd2Vzb21lID0gIWF3ZXNvbWVcIj50b2dnbGU8L2J1dHRvbj5cblxuXHQ8aDEgdi1pZj1cImF3ZXNvbWVcIj5WdWUgaXMgYXdlc29tZSE8L2gxPlxuXHQ8aDEgdi1lbHNlPk9oIG5vIPCfmKI8L2gxPlxuPC90ZW1wbGF0ZT4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL3NmYy52dWVqcy5vcmcvdnVlLnJ1bnRpbWUuZXNtLWJyb3dzZXIuanNcIlxuICB9XG59In0=)
 
 </div>
 <div class="options-api">
 
-[Try it in the Playground](https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdD5cbmV4cG9ydCBkZWZhdWx0IHtcbiAgZGF0YSgpIHtcbiAgXHRyZXR1cm4ge1xuXHQgICAgYXdlc29tZTogdHJ1ZVxuICBcdH1cblx0fVxufVxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGJ1dHRvbiBAY2xpY2s9XCJhd2Vzb21lID0gIWF3ZXNvbWVcIj50b2dnbGU8L2J1dHRvbj5cblxuXHQ8aDEgdi1pZj1cImF3ZXNvbWVcIj5WdWUgaXMgYXdlc29tZSE8L2gxPlxuXHQ8aDEgdi1lbHNlPk9oIG5vIPCfmKI8L2gxPlxuPC90ZW1wbGF0ZT4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL3NmYy52dWVqcy5vcmcvdnVlLnJ1bnRpbWUuZXNtLWJyb3dzZXIuanNcIlxuICB9XG59In0=)
+[Chạy thử](https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdD5cbmV4cG9ydCBkZWZhdWx0IHtcbiAgZGF0YSgpIHtcbiAgXHRyZXR1cm4ge1xuXHQgICAgYXdlc29tZTogdHJ1ZVxuICBcdH1cblx0fVxufVxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGJ1dHRvbiBAY2xpY2s9XCJhd2Vzb21lID0gIWF3ZXNvbWVcIj50b2dnbGU8L2J1dHRvbj5cblxuXHQ8aDEgdi1pZj1cImF3ZXNvbWVcIj5WdWUgaXMgYXdlc29tZSE8L2gxPlxuXHQ8aDEgdi1lbHNlPk9oIG5vIPCfmKI8L2gxPlxuPC90ZW1wbGF0ZT4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL3NmYy52dWVqcy5vcmcvdnVlLnJ1bnRpbWUuZXNtLWJyb3dzZXIuanNcIlxuICB9XG59In0=)
 
 </div>
 
-A `v-else` element must immediately follow a `v-if` or a `v-else-if` element - otherwise it will not be recognized.
+Một phần tử `v-else` phải theo ngay sau `v-if` hoặc `v-else-if`, nếu không nó sẽ không được chấp nhận.
 
 ## `v-else-if`
 
-The `v-else-if`, as the name suggests, serves as an "else if block" for `v-if`. It can also be chained multiple times:
+Như tên gọi cho thấy, `v-else-if` đóng vai trò là một "khối else if" cho `v-if`. Ta có thể viết nhiều `v-else-if` liên tiếp nhau:
 
 ```vue-html
 <div v-if="type === 'A'">
@@ -62,11 +62,11 @@ The `v-else-if`, as the name suggests, serves as an "else if block" for `v-if`.
 </div>
 ```
 
-Similar to `v-else`, a `v-else-if` element must immediately follow a `v-if` or a `v-else-if` element.
+Tương tự `v-else`, một phần tử `v-else-if` phải theo ngay sau `v-if` hoặc `v-else-if`.
 
-## `v-if` on `<template>`
+## `v-if` trên `<template>`
 
-Because `v-if` is a directive, it has to be attached to a single element. But what if we want to toggle more than one element? In this case we can use `v-if` on a `<template>` element, which serves as an invisible wrapper. The final rendered result will not include the `<template>` element.
+Vì là một directive, `v-if` phải được gắn với một phần tử duy nhất. Nhưng nếu ta muốn kích hoạt nhiều hơn một phần tử thì sao? Trong trường hợp này, ta có thể sử dụng `v-if` trên một phần tử `<template>`, đóng vai trò như một khối bọc (wrapper) vô hình. Kết quả render cuối cùng sẽ không bao gồm phần tử `<template>`.
 
 ```vue-html
 <template v-if="ok">
@@ -76,34 +76,34 @@ Because `v-if` is a directive, it has to be attached to a single element. But wh
 </template>
 ```
 
-`v-else` and `v-else-if` can also be used on `<template>`.
+`v-else` và `v-else-if` cũng có thể sử dụng trên `<template>`.
 
 ## `v-show`
 
-Another option for conditionally displaying an element is the `v-show` directive. The usage is largely the same:
+Một lựa chọn khác cho việc render một phần tử theo điều kiện là directive `v-show`. Cách sử dụng gần như hoàn toàn tương tự:
 
 ```vue-html
 <h1 v-show="ok">Hello!</h1>
 ```
 
-The difference is that an element with `v-show` will always be rendered and remain in the DOM; `v-show` only toggles the `display` CSS property of the element.
+Điểm khác nhau căn bản là một phần tử với `v-show` sẽ luôn được render và nằm trong DOM; `v-show` chỉ kích hoạt thuộc tính CSS `display` của phần tử.
 
-`v-show` doesn't support the `<template>` element, nor does it work with `v-else`.
+`v-show` không hỗ trợ `<template>` và không hoạt động với `v-else`.
 
 ## `v-if` vs `v-show`
 
-`v-if` is "real" conditional rendering because it ensures that event listeners and child components inside the conditional block are properly destroyed and re-created during toggles.
+`v-if` là hiển thị có điều kiện "thật" vì nó đảm bảo các xử lý sự kiện và component con bên trong khối điều kiện bị hủy bỏ và tái tạo trong quá trình kích hoạt.
 
-`v-if` is also **lazy**: if the condition is false on initial render, it will not do anything - the conditional block won't be rendered until the condition becomes true for the first time.
+Đồng thời, `v-if` cũng **lười biếng** (lazy): nếu điều kiện trả về giá trị sai (falsy) khi hiển thị lần đầu, nó sẽ không làm gì cả - khối điều kiện sẽ không được render cho đến khi điều kiện trở thành đúng lần đầu tiên.
 
-In comparison, `v-show` is much simpler - the element is always rendered regardless of initial condition, with CSS-based toggling.
+Để so sánh, `v-show` đơn giản hơn nhiều – phần tử luôn được render bất kể điều kiện ban đầu và được kích hoạt bằng CSS.
 
-Generally speaking, `v-if` has higher toggle costs while `v-show` has higher initial render costs. So prefer `v-show` if you need to toggle something very often, and prefer `v-if` if the condition is unlikely to change at runtime.
+Nói tóm lại, `v-if` có chi phí kích hoạt cao hơn, trong khi `v-show` có chi phí render lần đầu cao hơn. Vì vậy `v-show` phù hợp nếu bạn cần kích hoạt cái gì đó thường xuyên, và `v-if` phù hợp nếu điều kiện gần như không thay đổi trong quá trình chạy (runtime).
 
 ## `v-if` with `v-for`
 
-::: warning Note
-It's **not** recommended to use `v-if` and `v-for` on the same element due to implicit precedence. Refer to [style guide](/style-guide/rules-essential.html#avoid-v-if-with-v-for) for details.
+::: warning Chú ý
+**Không nên** dùng `v-if` và `v-for` trên cùng một phần tử do sự ưu tiên ngầm định. Tham khảo [hướng dẫn cách viết](/style-guide/rules-essential.html#avoid-v-if-with-v-for) để biết thêm chi tiết.
 :::
 
-When `v-if` and `v-for` are both used on the same element, `v-if` will be evaluated first. See the [list rendering guide](list#v-for-with-v-if) for details.
+Khi dùng cả `v-if` và `v-for` trên cùng một phần tử, `v-if` sẽ được xử lý trước. Xem [hướng dẫn về render danh sách](list#v-for-with-v-if) để biết thêm chi tiết.