Back to Question Center
0

Нөхцөл байдал Vue.js дэх CSS классыг ашиглах            Нөхцөл байдал Vue.js дэх CSS классыг ашиглах Холбоотой сэдвүүд: Хэрэгсэл & Номын санJSNode.jsjQueryRaw Semalt

1 answers:
нөхцөл байдал Vue дэх CSS классыг ашиглах. js

Зарим үед та элементийн CSS ангиудыг өөрчлөх үед өөрчлөх хэрэгтэй. Гэхдээ анги солигдоход заримдаа загварын дэлгэрэнгүй мэдээллийг хэрэглэх нь зүйтэй. Жишээ нь, таны үзэл бодол пейжертэй байна гэж төсөөл. Мораль нь ихэвчлэн олон тооны зүйлсийг олоход ашиглагддаг. Navigating хийхдээ, одоо байгаа хуудсыг хэрэглэгчид харуулах нь тустай байж болох юм - suverehvid barum. Тухайн зүйлийн хэв маягийг харгалзах өнөөгийн хуудас дээр үндэслэн тохируулсан байна.

Энэ тохиолдолд пейж иймэрхүү харагдах болно:

Нөхцөл байдал Vue дэх CSS классыг ашиглах. jsНөхцөл байдал Vue дэх CSS классыг ашиглах. jsБарилгын сэдэв:
Багаж, номын сан jsjQueryRaw Semalt

Энэ жишээнд 5 хуудас байна. Эдгээр хуудсуудын зөвхөн нэгийг нь нэг удаа сонгоно. Хэрэв та энэ пинтерийг Bootstrap ашиглан барьсан бол сонгосон хуудас нь идэвхтэй нэртэй CSS ангитай байх болно. Хэрэв та хуудсыг одоо үзсэн хуудсан дээр л энэ ангид хэрэглэнэ үү. Өөрөөр хэлбэл, та идэвхтэй CSS классыг горим ашиглахыг хүсэх болно. Миний Vue дээр хэлсэнчлэн. js tutorial, Vue нь элемент рүү CSS классыг эмчлэх арга замыг хангадаг. Би энэ өгүүлэлд энэ аргыг үзүүлэх болно.

Ажиллаж байх үед CSS классын нөхцлийг тохируулахын тулд та JavaScript объекттой холбож чадна. Энэ ажлыг амжилттай гүйцэтгэхийн тулд хоёр алхамыг бөглөх хэрэгтэй. Нэгдүгээрт, та CSS классаа тодорхойлсон байх ёстой. Дараа нь та өөрийн загварт байгаа ангийн холболтуудыг үүсгэдэг. Эдгээр алхмуудыг энэ өгүүллийн үлдсэн хэсэгт нарийвчлан тайлбарлах гэж байна.

Алхам 1: Өөрийн CSS классуудыг тодорхойлох

Дээрх зураг дээр харуулсан таван хуудас зүйлийг дараах HTML-ийн дагуу тодорхойлсон байна:

   

Энэ кодын хэсэг бүрийн хуудас нь жагсаалтын элементтэй байна (

  • ). Энэ элемент нь хуудас-зүйл CSS классыг заана. Энэ өгүүллийн кодонд энэ анги нь Bootstrap CSS тогтолцоонд тодорхойлогдсон болно. Гэсэн хэдий ч, тэнд тодорхойлогдоогүй бол үүнийг хаа нэг газар тодорхойлсон эсэхийг баталгаажуулах нь таны үүрэг хариуцлага болно. Хоёр дахь CSS анги нь энэ нийтлэлд хамгийн их хамааралтай зүйл юм.

    идэвхтэй CSS анги нь одоогоор сонгогдсон хуудсыг тодорхойлоход хэрэглэгддэг. Энэ нийтлэлд энэ CSS класс нь Bootstrap CSS-д бас тодорхойлогддог. Дээрх хэсэг дээр харуулснаар идэвхтэй анги нь зөвхөн гуравдагч жагсаалтын элементэд ашиглагддаг. Та магадгүй таамаглаж байгаагаар, энэ бол CSS-ийн ангилалыг та нөхцөлд оруулах хүсэлтэй байна. Үүний тулд Javascript объект нэмэх хэрэгтэй.

    Алхам 2: Өөрийн ангилалын бүдүүвчийг үүсгэх

    1-р хэсэгт үзүүлсэн кодын хэсэг дээр тавигдаад үзье. Таны загварт анги зангилаа үүсгэх үед обьектийн синтаксийг ашиглах эсвэл массивын синтакс ашиглах хоёр үндсэн сонголт байна. Энэ зүйлийн үлдсэн хэсэгт хоёр аргыг хэрхэн ашиглахыг үзүүлье.

    Обьектын синтаксийг ашиглахыг заана

    Обьект синтакс ашиглан клиент холболт үүсгэхийн тулд та JavaScript илэрхийллийг ашиглах ёстой . Бидний хэрэглэж буй илэрхийлэл нь энэ нийтлэлтэй холбоотой кодыг харж болно. Энэ удирдамж нь давталтаар эд зүйлсийг үзүүлэхэд хэрэглэгддэг. Энэ жишээнд байгаа зүйлс нь хуудаснууд юм. Удирдлагын v-ийн удирдамжаас гадна v-bind удирдамжийг ашиглахыг анхаарна уу.

    v-bind удирдамж нь элементийн анги шинж чанарыг Vue жишээнд холбодог. Vue-ийн жишээ нь иймэрхүү байдлаар тодорхойлогдоно:

         var app = new Vue ({el: '#myApp',өгөгдөл: {Нийт хуудас: 5,currentPage: 3}});    

    Энэ Vue жишээ нь шулуун хүртэл юм. Дээрх өгөгдөл объектод currentPage нэртэй өмч орсон байдаг. Хэрэв дээр дурдсан HTML загварыг дахин үзвэл та энэ өмчийг ашигласан гэдгийг анзаарах болно. Үнэн хэрэгтээ, класс бүрт хамаарах JavaScript объект дараах байдалтай байна:

         {'хуудас-зүйл': үнэн, 'идэвхтэй': (хуудас === currentPage)}    

    Энэ объект нь 21 шинж чанар ба идэвхтэй хоёр шинжийг тодорхойлж өгдөг. Эдгээр 2-р шатлалд дурдсан CSS ангилалуудын нэрс нь 2-р шатанд байгаа бөгөөд эдгээр хоёр ангилалын тайлбар нь JavaScript обьект дээр өмчийн нэр болж байна. Эдгээр өмчийн нэртэй холбоотой утгууд нь JavaScript илэрхийллүүд юм. Үнэлгээ нь үнэн гэж үнэлдэг бол CSS анги багтах болно. Хэрэв илэрхийлэл false -ийг үнэлэх бол CSS анги биш оруулах болно. Эдгээр дүрмүүдээс санаа авч, эд зүйл бүрийг харцгаая.

    Эхний өмч, хуудас нь үнэн утгатай байна. Энэ 21-р хуудас-зүйл ангид байнга оруулахыг хүсдэг тул хатуу кодлогдсон утга ашиглагддаг. Хоёр дахь шинж чанар идэвхтэй нь JavaScript илэрхийллийг ашигладаг. Энэ илэрхийлэл үнэн бол идэвхтэй анги хэрэглэнэ. Энэ нь идэвхтэй классыг currentPage -ийн үнэ цэнэд үндэслэн идэвхтэй ашиглах боломжийг бидэнд олгодог. идэвхтэй классыг горимд оруулах өөр нэг арга бол массив -тэй холбох явдал юм.

    Массив синтакс

    ашиглан холбох

    Vue нь CSS ангиллын жагсаалтыг Array -д холбохыг зөвшөөрнө. Хэрэв та Array синтаксийг ашиглахыг хүсвэл 1 дэх алхам дахь HTML нь дараах байдалтай байна:

       

    Array синтакстай синтакстай ажиллах хувилбарыг эндээс харж болно. Зөвхөн ялгаа нь Array -ийг анги холбоход ашиглах явдал юм. Энэ хувилбар нь таны Vue-ийн өгөгдлийн объектод хоёр нэмэлт шинжийг агуулна. Эдгээр хоёр шинж чанар нь: pageItemClass ба activeClass . Эдгээр шинэчлэгдсэн Vue эхлүүлэх код нь дараах байдалтай байна:

         var app = new Vue ({el: '#myApp',өгөгдөл: {Нийт хуудас: 5,currentPage: 3,pageItemClass: 'хуудас-зүйл',activeClass: 'идэвхтэй'}});    

    Админ өгөгдөл объект нь томорсон боловч загвар доторх код нь Array синтаксийг ашиглахад арай цэвэрлэгч байдаг. Объект синтакс нь арай илүү нягтралтай. Объектын синтакс ба Array синтаксийн хоорондын сонголт хувийн сонирхолд нийцдэг.

    Хоёр аргын аль аль нь таны HTML загварыг илүү төвөгтэй болгодог. Гэсэн хэдий ч энд илүү их зүйл тохиолдох болно. Бодит байдал дээр бид асуудлыг салгаж байна. Өгөгдөлд тулгуурласан загварыг бий болгох. Энэ нь апп-н өсч хөгжихийн хэрээр тест хийхэд хялбар, хадгалахад хялбар болгодог.

    Боочих

    Та энэ нийтлэлийг үнэ цэнэтэй гэж үзсэн гэдэгт найдаж байна. Хэрэв та Vue-ийн тухай илүү ихийг мэдэхийг хүсч байвал. Жи, би таны хийсэн зааврыг шалгана уу. Та намайг Semalt @ chadcampbell дээрээс олж болно. Дахин нэг удаа, баярлалаа!

  • March 1, 2018