Vue.JS zmienia styl
Vue.JS służy do tworzenia interfejsów użytkownika (UII) i aplikacji jednodrzewodowych (SPA). Łatwo jest nauczyć się korzystać z Vue.JS i ramy wolności i komfortu, które są dostępne podczas opracowywania aplikacji w tym programie, ponieważ ma najlepiej pomieszane cechy kątowych i reactJs. Dlatego jest znany z łatwego w użyciu i czystym kodowaniu.
Vue.JS zapewnia wiązanie stylu, którego można użyć do dynamicznej zmiany stylu. Możesz powiązać zmienną z atrybutem stylu w dowolnym znaczniku HTML i zmienić styl po zmianie zmiennej związanej. W tym artykule przyjrzymy się, jak korzystać z wiązania stylu i zmienić styl zmiennych za pomocą vue.JS.
Wiązanie stylu wbudowanego
W Vue.JS, możemy wiązać zmienne z atrybutami stylów za pomocą dyrektyw V-Bind.
Składnia obiektu
Podobnie jak w przypadku stylizacji CSS, możemy również wykonać styl inline w Vue.JS przy użyciu dyrektywy VI i Składnia obiektów Curly Braces. Możesz powiązać dowolną zmienną z atrybutem stylu za pomocą następującego skryptu:
Oraz w znaczniku skryptu i danych:
ata ()powrót
Colorvar: „czerwony”,
czcionki: 14
Możemy również sprowadzić obiekt do danych i powiązać ten obiekt z atrybutem stylu, aby nasz HTML wyglądał czysto w następujący sposób:
dane()powrót
StyleObject:
Colorvar: „czerwony”,
czcionki: 14
Teraz będziemy powiązać zmienną „StyleObject” z atrybutem stylu w następujący sposób:
Składnia tablicy
Vue.JS zapewnia również opcję powiązania wielu zmiennych w składni tablicy z pojedynczym znacznikiem HTML, w następujący sposób:
Wiele wartości
Podobnie możemy również podać wiele wartości za pomocą składni tablicy do właściwości CSS w ramach wiązania inline, w następujący sposób:
Są to różne sposoby, w jakie możemy użyć do wiązania zmiennych z atrybutem stylu, aby dynamicznie zmienić styl strony internetowej.
Streszczenie
Ten artykuł obejmował składnię do wiązania stylizacji inline. Dowiedziałeś się również o składni obiektów i składni tablicy używanej do powiązania wartości lub zmiennych z atrybutami stylu w vue.JS. Jeśli ten artykuł okazał się pomocny w lepszym zrozumieniu Vue.JS, możesz kontynuować czytanie w Linuxhint.com dla bardziej przydatnych treści.