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 ShowShow
- 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
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à
const display = window.getComputedStyle[document.getElementById["invoiceTable"], null].display;
8 ở trong folder const display = window.getComputedStyle[document.getElementById["invoiceTable"], null].display;
9 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]
This is block 1
This is block 2
export default {
}
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 { } 1Kết luận
Something like this: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ậnSomething like this:
or, if the display property is an inherited property:and then add your classes based on display:
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.
display === 'block' ? element.classList.add["block"] : element.classList.add["other"];
3display === 'block' ? element.classList.add["block"] : element.classList.add["other"];
4Ở 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.
This is block 1 This is block 2 export default { } 1
Kết luận
Something like this:or, if the display property is an inherited property:
and then add your classes based on display:Ở 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.
const display = window.getComputedStyle[document.getElementById["invoiceTable"], null].display;
4Ở bài này chúng ta tạo ra một file mới tên là
const display = window.getComputedStyle[document.getElementById["invoiceTable"], null].display;
8 ở trong folder const display = window.getComputedStyle[document.getElementById["invoiceTable"], null].display;
9 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]
This is block 1
This is block 2
export default {
}
Ở 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:
This is block 1
This is block 2
Button
export default {
data[] {
return {
isActive: true
}
},
methods: {
toggleActive[] {
if[this.isActive == true] {
this.isActive = false
}
else {
this.isActive = true
}
}
}
}
Ở đâ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é.- 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ị
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ụngconst display = window.getComputedStyle[document.getElementById["invoiceTable"], null].display;
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:display === 'block' ? element.classList.add["block"] : element.classList.add["other"];
9const display = window.getComputedStyle[document.getElementById["invoiceTable"], null].display;
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à
This is block 1
This is block 2
export default {
}
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 const display = window.getComputedStyle[document.getElementById["invoiceTable"], null].display;
92 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ề
const display = window.getComputedStyle[document.getElementById["invoiceTable"], null].display;
93 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é ^^!