Cách triển khai kết xuất có điều kiện trong Vue.js
Vue.js là một khung JavaScript phổ biến giúp dễ dàng tạo các ứng dụng web động. Vue.js có thể hiển thị nội dung dựa trên dữ liệu và sự kiện. Điều này đặc biệt hữu ích để tạo giao diện người dùng đáp ứng và tương tác.
Tìm hiểu chỉ thị Vue là gì và cách sử dụng chúng để đạt được kết xuất có điều kiện trong Vue.js.
Mục Lục
Chỉ thị Vue là gì?
Chỉ thị Vue cho phép bạn nâng cao hành vi của các thành phần HTML trong mẫu Vue.js bằng cách thêm các thuộc tính duy nhất cho chúng.
Chỉ thị là một phần cơ bản của Vue.js và cung cấp một cách đơn giản và mạnh mẽ để thao tác Mô hình đối tượng tài liệu (DOM), thêm hành vi động vào các phần tử và quản lý dữ liệu.
Ngoài ra, Vue.js cho phép bạn tạo các chỉ thị tùy chỉnh, cho phép bạn dễ dàng tạo các chức năng có thể sử dụng lại cho các ứng dụng Vue.
Vue framework đặt tiền tố cho các chỉ thị của nó với “v-“ trước tên của chỉ thị. Ví dụ về các lệnh thường được sử dụng trong Vue bao gồm v-on, liên kết v, v-choVà v-nếu.
Kết xuất có điều kiện là gì?
Kết xuất có điều kiện cho phép bạn hiển thị hoặc ẩn các phần tử dựa trên các điều kiện mà bạn chỉ định. Ví dụ: bạn có thể sử dụng kết xuất có điều kiện để chỉ hiển thị thông báo cho người dùng nếu họ đã nhập địa chỉ email hợp lệ.
Trong Vue.js, bạn có thể sử dụng các lệnh như v-nếu Và v-show để đạt được kết xuất có điều kiện trong ứng dụng của bạn, khác với cách bạn kết xuất nội dung có điều kiện trong React.js.
Đạt được kết xuất có điều kiện với Chỉ thị v-if
Tương tự với Javascript nếu khác tuyên bố, các v-nếu chỉ thị trong Vue.js có một điều kiện. Nếu nó không thỏa mãn, Vue.js sẽ đánh giá điều kiện sau được chỉ định trong v-khác chỉ thị và tiếp tục làm như vậy cho đến khi nó đáp ứng một điều kiện hoặc đánh giá tất cả các điều kiện.
Lệnh này cho phép bạn hiển thị có điều kiện một phần tử dựa trên giá trị boolean. Trình biên dịch Vue.js sẽ không hiển thị phần nếu giá trị của nó là sai.
Đây là một ví dụ về hiển thị nội dung có điều kiện với v-nếu:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1 v-if='false' >{{ message1 }}</h1>
<h1 v-else >{{ message2 }}</h1>
</div>
<script>
const app = Vue.createApp({
data () {
return {
message1: 'This is your Vue App.',
message2: 'Not Yet a Vue App.'
}
}
}) app.mount('#app')
</script>
</body>
</html>
Khối mã ở trên mô tả ứng dụng Vue được tạo bằng cách thêm liên kết Mạng phân phối nội dung (CDN) vào nội dung tệp HTML của bạn. Lệnh v-if sẽ chỉ hiển thị phần tử h1 nếu điều kiện của nó là đúng.
Trong các ứng dụng Vue, có những trường hợp bạn cần kết xuất một thành phần dựa trên các tiêu chí động cụ thể. Điều này hữu ích trong các tình huống chẳng hạn như chỉ hiển thị thông tin khi người dùng nhấp vào nút hoặc hiển thị chỉ báo tải trong khi dữ liệu đang tải từ API.
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue app</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<div v-if="showUsers">
<ul>
<li>User1</li>
<li>User2</li>
</ul>
</div>
<button v-on:click="toggleShowUsers()">
Toggle Users
</button>
<h1>{{ message }}</h1>
</div>
<script>
const app = Vue.createApp({
data () {
return {
showUsers: true,
message: 'This is your Vue App.'
}
},
methods: {
toggleShowUsers() {
this.showUsers = !this.showUsers
}
}
}) app.mount('#app')
</script>
</body>
</html>
Khối mã trên sử dụng v-nếu chỉ thị để hiển thị nội dung có điều kiện dựa trên giá trị của biến boolean, showUsers.
Các div phần tử được hiển thị nếu giá trị là ĐÚNG VẬY và ẩn nếu nó là SAI. nhấp vào chuyển đổi người dùng nút kích hoạt ToggleShowUsers() Phương pháp thay đổi giá trị của showUsers.
Ví dụ này cũng sử dụng v-on để lắng nghe các sự kiện, chẳng hạn như sự kiện nhấp chuột vào nút. Nó đánh giá lại các v-nếu chỉ thị bất cứ khi nào giá trị của showUsers thay đổi.
Đạt được kết xuất có điều kiện với Chỉ thị v-show
Các v-show chỉ thị là một cách khác để hiển thị hoặc ẩn các phần tử trong Vue.js một cách có điều kiện. Nó tương tự như v-nếu ở chỗ nó có thể hiển thị các phần tử dựa trên biểu thức Boolean. Tuy nhiên, có một số khác biệt quan trọng giữa hai chỉ thị.
Các v-show lệnh không xóa phần tử khỏi DOM khi biểu thức đánh giá là sai. Thay vào đó, nó sử dụng CSS để chuyển đổi phần tử trưng bày tài sản giữa không có và giá trị ban đầu của nó.
Điều này có nghĩa là phần tử vẫn hiện diện trong DOM nhưng không hiển thị khi biểu thức sai.
Đây là một ví dụ:
<body>
<div id="app">
<div v-if="showUsers">
<ul>
<li>User1</li>
<li>User2</li>
</ul>
</div>
<button v-on:click="toggleShowUsers()">
Toggle Users
</button>
<h1 v-show="showUsers">{{ message }}</h1>
</div>
<script>
const app = Vue.createApp({
data () {
return {
showUsers: true,
message: 'These are the users of the Vue app'
}
},
methods: {
toggleShowUsers() {
this.showUsers = !this.showUsers
}
}
}) app.mount('#app')
</script>
</body>
Khối mã trên sử dụng v-show chỉ thị để hiển thị thông báo cho biết, ‘Đây là những người dùng của ứng dụng Vue’ bất cứ lúc nào bạn nhấp vào nút chuyển đổi.
Lựa chọn giữa v-if và v-show
Khi quyết định giữa việc sử dụng v-nếu Và v-show để hiển thị hoặc ẩn các phần tử trong Vue.js một cách có điều kiện, có một số yếu tố quan trọng cần xem xét.
Khi điều kiện hiếm khi thay đổi, sử dụng v-nếu chỉ đạo là tốt. Điều này là do v-nếu xóa phần tử khỏi DOM khi điều kiện sai, điều này có thể cản trở hiệu suất tối ưu. Phần tử chỉ được hiển thị khi điều kiện trở thành đúng và bị xóa khỏi DOM khi điều kiện lại trở thành sai.
Mặt khác, nếu điều kiện có khả năng thay đổi thường xuyên, tốt hơn là sử dụng v-show chỉ thị, giúp cải thiện hiệu suất. Điều này là do v-show sử dụng CSS để ẩn hoặc hiển thị phần tử bằng cách chuyển đổi thuộc tính hiển thị CSS giữa không và khối, khiến phần tử luôn được hiển thị cho DOM.
Kết xuất có điều kiện trong ứng dụng Vue của bạn thật dễ dàng
Bạn đã học cách kết xuất nội dung có điều kiện trong ứng dụng Vue với các lệnh v-if và v-show. Bằng cách sử dụng các chỉ thị này, bạn có thể nhanh chóng hiển thị nội dung dựa trên các điều kiện khác nhau, cho phép bạn kiểm soát nhiều hơn đối với giao diện và hành vi của các thành phần Vue của mình.