vue.js ต้องเรียนรู้ทุกวันและการผูกสไตล์

ข้อกำหนดทั่วไปสำหรับการเชื่อมโยงข้อมูลคือรายการคลาสขององค์ประกอบการดำเนินการและสไตล์อินไลน์ เนื่องจากพวกเขาเป็นคุณลักษณะทั้งหมดเราจึงสามารถจัดการกับ V-bind: เพียงคำนวณสตริงสุดท้ายของนิพจน์ อย่างไรก็ตามการประกบสตริงนั้นลำบากและง่ายต่อการทำผิดพลาด ดังนั้น vue.js จะเพิ่มขึ้นโดยเฉพาะเมื่อใช้ V-bind สำหรับชั้นเรียนและสไตล์ ประเภทผลลัพธ์ของนิพจน์สามารถเป็นวัตถุหรืออาร์เรย์นอกเหนือจากสตริง

ผูกคลาส HTML

แม้ว่าคุณสามารถใช้แท็กหนวดในการผูกคลาสเช่น `{ % RAW %} class =" {{className}} "{ % endraw %}` เราไม่แนะนำวิธีการเขียนนี้และ `v-bind: class ' สามารถเลือกได้เพียงหนึ่งในสองคน!

ไวยากรณ์วัตถุ

เราสามารถส่งวัตถุไปยัง V-bind: คลาสเพื่อสลับคลาสแบบไดนามิก โปรดทราบว่า V-bind: class directive สามารถอยู่ร่วมกับคุณสมบัติคลาสทั่วไป:

 <div v-bind: class = "{'class-a': isa, 'class-b': isb}"> </div> ข้อมูล: {isa: true, isb: false}

แสดงเป็น:

<div> </div>

เมื่อ ISA และ ISB เปลี่ยนแปลงรายการคลาสจะได้รับการอัปเดตตามนั้น ตัวอย่างเช่นหาก ISB กลายเป็นจริงรายการคลาสจะกลายเป็น "class-A class-A แบบคงที่"

คุณสามารถผูกวัตถุโดยตรงในข้อมูล:

 <div v-bind: class = "classObject"> </div> ข้อมูล: {classObject: {'class-a': true, 'class-b': false}}}

นอกจากนี้เรายังสามารถผูกคุณสมบัติที่คำนวณได้ซึ่งส่งคืนวัตถุที่นี่ นี่เป็นโหมดที่ใช้กันทั่วไปและทรงพลัง

ไวยากรณ์อาร์เรย์

เราสามารถส่งอาร์เรย์ไปยัง V-bind: คลาสเพื่อใช้รายการคลาส:

 <div v-bind: class = "[classa, classb]"> data: {classa: 'class-a', classb: 'class-b'}

แสดงเป็น:

<div> </div>

หากคุณต้องการสลับคลาสในรายการตามเงื่อนไขคุณสามารถใช้นิพจน์ ternary:

<div v-bind: class = "[classa, isb? classb: '']">

ตัวอย่างนี้จะเพิ่ม classa เสมอ แต่ classb เฉพาะในกรณีที่ ISB เป็นจริง

อย่างไรก็ตามการเขียนด้วยวิธีนี้ค่อนข้างยุ่งยากเมื่อมีคลาสมีเงื่อนไขหลายคลาส ใน 1.0.19+ วัตถุประสงค์ของวัตถุสามารถใช้ในไวยากรณ์อาร์เรย์:

<div v-bind: class = "[classa, {classb: isb, classc: isc}]">

ผูกสไตล์อินไลน์

ไวยากรณ์วัตถุ

ไวยากรณ์วัตถุของ V -bind: สไตล์นั้นใช้งานง่ายมาก - มันดูคล้ายกับ CSS มาก แต่จริงๆแล้วมันเป็นวัตถุ JavaScript ชื่อแอตทริบิวต์ CSS สามารถตั้งชื่อได้โดย camelcase หรือการแยกแนวนอนสั้น (เคบับกรณี):

 <div v-bind: style = "{color: ActivEcolor, FontSize: FontSize + 'Px'}"> </div> ข้อมูล: {ActiveColor: 'Red', FontSize: 30}

โดยปกติแล้วจะดีกว่าที่จะผูกโดยตรงกับวัตถุสไตล์ทำให้เทมเพลตชัดเจนขึ้น:

 <div v-bind: style = "styleoBject"> </div> ข้อมูล: {styleObject: {color: 'red', fontsize: '13px'}}}

ในทำนองเดียวกันไวยากรณ์วัตถุมักใช้ร่วมกับคุณสมบัติที่คำนวณได้ของวัตถุที่ส่งคืน

ไวยากรณ์อาร์เรย์

V-bind: ไวยากรณ์อาร์เรย์ของสไตล์สามารถใช้วัตถุหลายสไตล์กับองค์ประกอบเดียว:

<div v-bind: style = "[styleobjecta, styleobjectb]">

เพิ่มคำนำหน้าโดยอัตโนมัติ

เมื่อ V-bind: Style ใช้แอตทริบิวต์ CSS ที่ต้องการคำนำหน้าผู้ขายเช่นการแปลง, vue.js จะตรวจจับและเพิ่มคำนำหน้าที่สอดคล้องกันโดยอัตโนมัติ

บทความนี้ได้รวบรวมไว้ใน "Vue.js front-end การสอนการเรียนรู้การเรียนรู้" และทุกคนยินดีที่จะเรียนรู้และอ่าน

สำหรับการสอนเกี่ยวกับส่วนประกอบ vue.js โปรดคลิกที่หัวข้อพิเศษ vue.js การสอนการเรียนรู้องค์ประกอบเพื่อเรียนรู้

สำหรับบทช่วยสอนการเรียนรู้ VUE เพิ่มเติมโปรดอ่านหัวข้อพิเศษ "Vue Practical Tutorial"

ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น