Hướng dẫn css conditional display - hiển thị điều kiện css

Question

One way to achieve this would be to store the style attribute of that element to a variable and check if is display or block and based on that you can add class.

Nội dung chính Show

const display = window.getComputedStyle(document.getElementById("invoiceTable"), null).display; 4
display === 'block' ? element.classList.add("block") : element.classList.add("other"); 2, display === 'block' ? element.classList.add("block") : element.classList.add("other"); 3
1
Kết luận

Something like this:

const display =  document.getElementById("invoiceTable").style.display; // Inline style

or, if the display property is an inherited property:

  const display =   window.getComputedStyle(document.getElementById("invoiceTable"), null).display;

and then add your classes based on display:

display === 'block' ? element.classList.add("block") : element.classList.add("other");

Xin chào tất cả các bạn đã quay trở lại với series học VueJS với Laravel của mình, ở bài trước mình đã hướng dẫn các bạn về Wacher trong VueJS, ở trong bài này chúng ta sẽ cùng đến với Conditional rendering, đây là những thứ mà mình tin chắc các bạn sẽ dùng rất nhiều trong công việc.

Ở bài này cách sử dụng của các directive điều kiện này khá là giống với những gì các bạn đã từng được học trong các ngôn ngữ lập trình.

Ở bài này chúng ta tạo ra một file mới tên là ConditionalRendering.vue ở trong folder components nhé, sau đó chúng ta khai báo nó ở trong file

  const display =   window.getComputedStyle(document.getElementById("invoiceTable"), null).display;

0 và nhớ thêm nó vào file

  const display =   window.getComputedStyle(document.getElementById("invoiceTable"), null).display;

1 nhé. Nội dung như bên dưới, các bạn chạy thử xem nhé: (nhớ luôn chạy

  const display =   window.getComputedStyle(document.getElementById("invoiceTable"), null).display;

2 và

  const display =   window.getComputedStyle(document.getElementById("invoiceTable"), null).display;

3 nhé mọi người)

<template>
    <div class="conditional-rendering">
        <div class="block-1">
            This is block 1
        div>
        <div class="block-2">
            This is block 2
        div>
    div>
template>

<script>
    export default {

    }
script>

<style lang="scss" scoped>
style>

const display = window.getComputedStyle(document.getElementById("invoiceTable"), null).display; 4

Ở ví dụ trên nếu như chúng ta muốn chỉ render ra từng block ở những điều kiện nhất định, khi đó chúng ta có thể sử dụng

  const display =   window.getComputedStyle(document.getElementById("invoiceTable"), null).display;

4 để quản lý việc render. Cùng xem ví dụ sau:

<template>
    <div class="conditional-rendering">
        <div class="block-1" v-if="isActive == false">
            This is block 1
        div>
        <div class="block-2" v-if="isActive == true">
            This is block 2
        div>
        <div>
            <button @click="toggleActive">Buttonbutton>
        div>
    div>
template>

<script>
    export default {
        data() {
            return {
                isActive: true
            }
        },
        methods: {
            toggleActive() {
                if(this.isActive == true) {
                    this.isActive = false
                }
                else {
                    this.isActive = true
                }
            }
        }
    }
script>

<style lang="scss" scoped>
style>

Ở đây block 1 chỉ được render khi

  const display =   window.getComputedStyle(document.getElementById("invoiceTable"), null).display;

6 có giá trị

  const display =   window.getComputedStyle(document.getElementById("invoiceTable"), null).display;

7 và ngược lại thì block 2 sẽ được render. Chúng ta tạo một

  const display =   window.getComputedStyle(document.getElementById("invoiceTable"), null).display;

8 để toggle giá trị của

  const display =   window.getComputedStyle(document.getElementById("invoiceTable"), null).display;

6 bằng cách mỗi lần click

  const display =   window.getComputedStyle(document.getElementById("invoiceTable"), null).display;

8 thì sẽ gọi đến hàm

display === 'block' ? element.classList.add("block") : element.classList.add("other");

1. Các bạn f5 lại trình duyệt và thử kết quả nhé. Các bạn bật cả Vue devtool nên để xem giá trị của isActive thay đổi như thế nào mỗi lần click nhé.

display === 'block' ? element.classList.add("block") : element.classList.add("other"); 2, display === 'block' ? element.classList.add("block") : element.classList.add("other"); 3

Với ví dụ trên luồng xử lý của chúng ta có performance chưa tốt, vì mỗi lần component này render, đến block 1 nó sẽ kiểm tra giá trị

  const display =   window.getComputedStyle(document.getElementById("invoiceTable"), null).display;

6, sau đó đến block 2 nó lại kiểm tra giá trị

  const display =   window.getComputedStyle(document.getElementById("invoiceTable"), null).display;

6 một lần nữa. Thay vì phải kiểm tra 2 lần như thế chúng ta có thể sử dụng

display === 'block' ? element.classList.add("block") : element.classList.add("other");

2 để Vue bỏ qua kiểm tra biểu thức còn lại nếu như một trong 2 biểu thức đã đúng, được mô tả như trong đoạn code sau:

<template>
    <div class="conditional-rendering">
        <div class="block-1" v-if="isActive == false">
            This is block 1
        div>
        <div class="block-2" v-else>
            This is block 2
        div>
        <div>
            <button @click="isActive = !isActive">Buttonbutton>
        div>
    div>
template>

<script>
    export default {
        data() {
            return {
                isActive: true
            }
        }
    }
script>

<style lang="scss" scoped>
style>

Ở đây mình sử lại code một chút cho gọn, không dùng đến methods để thay đổi giá trị của

  const display =   window.getComputedStyle(document.getElementById("invoiceTable"), null).display;

6 nữa mà chúng ta sẽ để trực tiếp khi sự kiện

display === 'block' ? element.classList.add("block") : element.classList.add("other");

8 được gọi thì thay đổi giá trị của

  const display =   window.getComputedStyle(document.getElementById("invoiceTable"), null).display;

6 trái ngược với giá trị hiện tại.

Các bạn load lại trình duyệt và thử xem kết quả nhé, ta nhận được điều tương tự.

Tiếp theo khi chúng ta có nhiều block muốn render theo từng điều kiện cụ thể thì đó là lúc chúng ta nghĩ đến

display === 'block' ? element.classList.add("block") : element.classList.add("other");

3

<template>
    <div class="conditional-rendering">
        <div class="block-1" v-if="currentBlock == 1">
            This is block 1
        div>
        <div class="block-2" v-else-if="currentBlock == 2">
            This is block 2
        div>
        <div class="block-3" v-else>
            This is block 3
        div>
        <div>
            <button @click="showBlock(1)">Button 1button>
        div>
        <div>
            <button @click="showBlock(2)">Button 2button>
        div>
        <div>
            <button @click="showBlock(3)">Button 3button>
        div>
    div>
template>

<script>
    export default {
        data() {
            return {
                currentBlock: 1
            }
        },
        methods: {
            showBlock(number) {
                this.currentBlock = number
            }
        }
    }
script>

<style lang="scss" scoped>
style>

Cách sử dụng khá đơn giản, các bạn có thể tự xem và giải thích, nếu không hiểu thì comment bên dưới nhé.

1

Quay trở lại ví dụ ở phần

  const display =   window.getComputedStyle(document.getElementById("invoiceTable"), null).display;

4, để có thể hiện thị 1 trong 2 block tùy theo giá trị của

  const display =   window.getComputedStyle(document.getElementById("invoiceTable"), null).display;

6, chúng ta cũng có thể sử dụng cách khác đó là dùng

<template>
    <div class="conditional-rendering">
        <div class="block-1">
            This is block 1
        div>
        <div class="block-2">
            This is block 2
        div>
    div>
template>

<script>
    export default {

    }
script>

<style lang="scss" scoped>
style>

1:

<template>
    <div class="conditional-rendering">
        <div class="block-1" v-show="isActive == false">
            This is block 1
        div>
        <div class="block-2" v-show="isActive == true">
            This is block 2
        div>
        <div>
            <button @click="isActive = !isActive">Buttonbutton>
        div>
    div>
template>

<script>
    export default {
        data() {
            return {
                isActive: true
            }
        }
    }
script>

<style lang="scss" scoped>
style>

Cùng load lại trình duyệt và các bạn sẽ thấy kết quả tương tự như dùng

  const display =   window.getComputedStyle(document.getElementById("invoiceTable"), null).display;

4 mỗi khi click vào button. Đến đây các bạn sẽ tự hỏi: "giời ơi vậy thì cuối cùng v-if hay là v-show, tôi nên dùng cái nào?" . Chúng ta cùng đào sâu hơn một chút về chúng nhé.

Hướng dẫn css conditional display - hiển thị điều kiện css

. Chúng ta cùng đào sâu hơn một chút về chúng nhé.

*Đối với v-if: sử dụng ví dụ phần

  const display =   window.getComputedStyle(document.getElementById("invoiceTable"), null).display;

4

Nếu chúng ta mở inspect HTML lên (f12 trên win, hoặc chuột phải và chọn

<template>
    <div class="conditional-rendering">
        <div class="block-1">
            This is block 1
        div>
        <div class="block-2">
            This is block 2
        div>
    div>
template>

<script>
    export default {

    }
script>

<style lang="scss" scoped>
style>

7), mỗi lần click vào button thì thẻ

<template>
    <div class="conditional-rendering">
        <div class="block-1">
            This is block 1
        div>
        <div class="block-2">
            This is block 2
        div>
    div>
template>

<script>
    export default {

    }
script>

<style lang="scss" scoped>
style>

8 chứa block cũ sẽ được thay thế nội dung của block mới.

*Đối với v-show: sử dụng ví dụ ngay bên trên

Khi inspect các bạn có thể thấy ngay là Vue đã render sẵn ra luôn 2 element chính là 2 block của chúng ta, và tùy với giá trị của

  const display =   window.getComputedStyle(document.getElementById("invoiceTable"), null).display;

6 mà block đó có

<template>
    <div class="conditional-rendering">
        <div class="block-1" v-if="isActive == false">
            This is block 1
        div>
        <div class="block-2" v-if="isActive == true">
            This is block 2
        div>
        <div>
            <button @click="toggleActive">Buttonbutton>
        div>
    div>
template>

<script>
    export default {
        data() {
            return {
                isActive: true
            }
        },
        methods: {
            toggleActive() {
                if(this.isActive == true) {
                    this.isActive = false
                }
                else {
                    this.isActive = true
                }
            }
        }
    }
script>

<style lang="scss" scoped>
style>

0 là

<template>
    <div class="conditional-rendering">
        <div class="block-1" v-if="isActive == false">
            This is block 1
        div>
        <div class="block-2" v-if="isActive == true">
            This is block 2
        div>
        <div>
            <button @click="toggleActive">Buttonbutton>
        div>
    div>
template>

<script>
    export default {
        data() {
            return {
                isActive: true
            }
        },
        methods: {
            toggleActive() {
                if(this.isActive == true) {
                    this.isActive = false
                }
                else {
                    this.isActive = true
                }
            }
        }
    }
script>

<style lang="scss" scoped>
style>

1 hay không.

Điều rút ra ở đây là:

  const display =   window.getComputedStyle(document.getElementById("invoiceTable"), null).display;

4 không render ngay ra toàn bộ các element mà tùy vào giá trị kiểm tra, còn với

<template>
    <div class="conditional-rendering">
        <div class="block-1">
            This is block 1
        div>
        <div class="block-2">
            This is block 2
        div>
    div>
template>

<script>
    export default {

    }
script>

<style lang="scss" scoped>
style>

1 sẽ render ra ngay từ đầu và chỉ quyết định có

<template>
    <div class="conditional-rendering">
        <div class="block-1" v-if="isActive == false">
            This is block 1
        div>
        <div class="block-2" v-if="isActive == true">
            This is block 2
        div>
        <div>
            <button @click="toggleActive">Buttonbutton>
        div>
    div>
template>

<script>
    export default {
        data() {
            return {
                isActive: true
            }
        },
        methods: {
            toggleActive() {
                if(this.isActive == true) {
                    this.isActive = false
                }
                else {
                    this.isActive = true
                }
            }
        }
    }
script>

<style lang="scss" scoped>
style>

4 nó hay không

Từ kết quả trên chúng ta thấy rằng: nếu nội dung trong block mà ít, và trong quá trình sử dụng mà user sẽ tác động đến block nhiều thì dùng

<template>
    <div class="conditional-rendering">
        <div class="block-1">
            This is block 1
        div>
        <div class="block-2">
            This is block 2
        div>
    div>
template>

<script>
    export default {

    }
script>

<style lang="scss" scoped>
style>

1 sẽ cho tốc độ tốt hơn, còn nếu nội dung trong block mà nhiều cùng với nhiều xử lý hoặc nội dung của block ít thay đổi trong suốt vòng đời của component thì khi đó không nên dùng

<template>
    <div class="conditional-rendering">
        <div class="block-1">
            This is block 1
        div>
        <div class="block-2">
            This is block 2
        div>
    div>
template>

<script>
    export default {

    }
script>

<style lang="scss" scoped>
style>

1 vì lúc đó trang của chúng ta sẽ nặng làm giảm performance và ta cần nghĩ đến dùng

  const display =   window.getComputedStyle(document.getElementById("invoiceTable"), null).display;

4

Kết luận

Qua bài này mong rằng các bạn sẽ biết cách sử dụng

  const display =   window.getComputedStyle(document.getElementById("invoiceTable"), null).display;

4,

display === 'block' ? element.classList.add("block") : element.classList.add("other");

2,

display === 'block' ? element.classList.add("block") : element.classList.add("other");

3 và

<template>
    <div class="conditional-rendering">
        <div class="block-1">
            This is block 1
        div>
        <div class="block-2">
            This is block 2
        div>
    div>
template>

<script>
    export default {

    }
script>

<style lang="scss" scoped>
style>

1 trong quá trình phát triển ứng dụng các bạn sẽ phải dùng đến nó rất nhiều. Đồng thời hiểu và sử dụng linh hoạt các

<template>
    <div class="conditional-rendering">
        <div class="block-1" v-if="isActive == false">
            This is block 1
        div>
        <div class="block-2" v-else>
            This is block 2
        div>
        <div>
            <button @click="isActive = !isActive">Buttonbutton>
        div>
    div>
template>

<script>
    export default {
        data() {
            return {
                isActive: true
            }
        }
    }
script>

<style lang="scss" scoped>
style>

2 này để có một ứng dụng tốt.

Ở bài tiếp theo chúng ta sẽ cùng tìm hiểu về

<template>
    <div class="conditional-rendering">
        <div class="block-1" v-if="isActive == false">
            This is block 1
        div>
        <div class="block-2" v-else>
            This is block 2
        div>
        <div>
            <button @click="isActive = !isActive">Buttonbutton>
        div>
    div>
template>

<script>
    export default {
        data() {
            return {
                isActive: true
            }
        }
    }
script>

<style lang="scss" scoped>
style>

3 nhé.

Cám ơn các bạn đã theo dõi, nếu có gì thắc mắc các bạn để lại comment cho mình nhé ^^!

programming css CSS display CSS conditional formatting CSS display Tutorial CSS display: flex Conditional CSS v-if vuejs CSS display demo

Hướng dẫn css conditional display - hiển thị điều kiện css

const display = window.getComputedStyle(document.getElementById("invoiceTable"), null).display; 4

display === 'block' ? element.classList.add("block") : element.classList.add("other"); 2, display === 'block' ? element.classList.add("block") : element.classList.add("other"); 3

This is block 1 This is block 2 export default { } 1

Kết luận

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

1