Giới thiệu

Vue.js là một khung ứng dụng web đơn giản để tạo giao diện web động và Ứng dụng một trang (SPA). Khi chúng tôi tạo các ứng dụng này, đôi khi, chúng tôi muốn render something based on a particular criteria – đây là bản chất của kết xuất có điều kiện.

Kết xuất có điều kiện đề cập đến khả năng hiển thị đánh dấu giao diện người dùng (UI) riêng biệt dựa trên việc một điều kiện có đúng hay không. Khái niệm này thường được sử dụng trong các ngữ cảnh như hiển thị hoặc ẩn các thành phần (chuyển đổi), chuyển đổi chức năng ứng dụng, xử lý xác thực và ủy quyền, v.v.

Trong bài viết này, chúng ta sẽ xem xét các cách khác nhau để hiển thị có điều kiện trong Vue.js bằng cách sử dụng v-if, v-else-ifv-else các chỉ thị. Chúng tôi cũng sẽ xem xét một số ví dụ và làm nổi bật sự khác biệt giữa v-ifv-show.

v-nếu

Các v-if chỉ thị được sử dụng để có điều kiện hiển thị một khối có nghĩa là khối với v-if thuộc tính sẽ chỉ là sản xuất nếu biểu thức của chỉ thị trả về một true. Nếu biểu thức tạo ra kết quả không hợp lệ (ví dụ: null, 0chuỗi trống, false), phần tử là đã xóa từ DOM.

Hãy minh họa hành vi này trên ví dụ thực tế:

<div v-if="login">
    <p>This user has been logged in!... Welcome.</p>
</div>

<script>
export default {
    data() {
        return {
            login: true,
        };
    }
};
</script>

Từ login được đặt thành truecác <div> khối chứa v-if Chỉ thị sẽ được tạo ra, do đó được hiển thị.

v-nếu vs v-show

Điều đáng chú ý là v-show cũng sẽ hoạt động trong ví dụ trên và sẽ hoạt động dường như giống nhau, nhưng có sự khác biệt giữa hai loại.

v-if conditionally renders một phần tử, trong khi v-show conditionally shows/displays một yếu tố.

Điều này ngụ ý rằng khi điều kiện được bật tắt, v-if thực sự sẽ xóa và khôi phục các thành phần wile v-show chỉ làm cho chúng vô hình hoặc hiển thị. Hình ảnh động sau đây minh họa cách v-if thực sự xóa và tái tạo các khối mã:

Trong khi đó, v-show sẽ luôn duy trì phần tử trong DOM và sẽ chỉ thay đổi CSS của nó để chuyển đổi giao diện của nó (bằng cách đặt display đến none):

v-else

Các v-else chỉ thị là một v-if chỉ thị cho phép bạn tùy chỉnh false trong kết xuất có điều kiện. Nếu nó không phải truebạn có thể dùng v-else để xác định những gì sẽ xảy ra thay thế.

Ví dụ: giả sử chúng ta có một đầu vào mật khẩu và chúng ta muốn nó tạo ra một thông báo lỗi, “Mật khẩu yếu”nếu độ dài của đầu vào nhỏ hơn 6 hoặc hiển thị “Mật khẩu mạnh” nếu chiều dài lớn hơn 6.

Đây là một kết xuất có điều kiện, với một tùy chọn để xử lý trường hợp sai:

<form>
    <input type="password" v-model="password" placeholder="Enter your password" />
    <p v-if="password.length > 6">Strong Password</p>
    <p v-else>Weak Password</p>
</form>

<script>
export default {
    data() {
        return {
            password: ""
        };
    }
};
</script>

Ghi chú: v-if/v-else hoạt động như bình thường ifif…else biểu thức trong JavaScript.

Hãy sử dụng điều này để chuyển đổi nội dung của một trang đăng nhập đơn giản để nó thay đổi thông báo dựa trên việc người dùng có đăng nhập hay không. Chúng tôi sẽ sửa đổi từ ngữ của nút dựa trên userLoggedIn tình trạng cũng như:

<div >
    <div v-if="userLoggedIn">
        <h2>Hello Welcome!</h2>
        <p>You have sucessfully logged in to your user account!</p>
    </div>
    <div v-else>
        <p>Please Log In to access your account!</p>
    </div>
    <button @click="userLoggedIn = !userLoggedIn">
        <p v-if="!userLoggedIn">Login</p>
        <p v-else>LogOut</p>
    </button>
</div>
    
<script>
export default {
    data() {
        return {
            userLoggedIn: false
        };
    }
};
</script>

Sự kiện nhấp chuột của nút sẽ chuyển đổi userLoggedIn mục dữ liệu và điều này sẽ ảnh hưởng đến dữ liệu được hiển thị như bên dưới:

v-else-if

v-else-if extends a v-if một else…if khối. Điều này tương tự như JavaScript của else…if trong đó nó cho phép chúng tôi thêm một câu lệnh if vào một v-if. Điều này được sử dụng khi có nhiều tiêu chí cần kiểm tra và có thể được xâu chuỗi nhiều lần:

<form>
    <input type="password" v-model="password" placeholder="Enter your password" />
    <p v-if="password.length < 4">Weak Password</p>
    <p v-else-if="password.length < 7">Fairly Strong Password</p>
    <p v-else>Strong Password</p>
</form>

<script>
export default {
    data() {
        return {
            password: ""
        };
    }
};
</script>

Ghi chú: Khi cả hai v-ifv-for được sử dụng với cùng một phần tử, v-if được đánh giá đầu tiên. Điều này chỉ đơn giản ngụ ý rằng việc sử dụng v-ifv-for trên cùng một yếu tố không được khuyến cáo, do có mức độ ưu tiên ngầm định.

Sự kết luận

Trong bài viết này, chúng ta đã biết cách hiển thị có điều kiện một phần tử với v-if, v-elsev-else-if. Chúng tôi cũng giải thích sự khác biệt giữa v-ifv-show.