1. คำนำ
ฉันเชื่อว่าทุกคนรู้ว่าข้อกำหนดทั่วไปสำหรับการเชื่อมโยงข้อมูลคือรายการคลาสขององค์ประกอบการทำงานและสไตล์อินไลน์ เนื่องจากพวกเขาเป็นคุณสมบัติทั้งหมดเราสามารถจัดการกับ v-bind : เราเพียงแค่ต้องคำนวณสตริงสุดท้ายของนิพจน์ อย่างไรก็ตามการประกบสตริงนั้นลำบากและง่ายต่อการทำผิดพลาด ดังนั้น vue.js จะเพิ่มขึ้นเป็นพิเศษเมื่อใช้ v-bind สำหรับชั้นเรียนและสไตล์ ประเภทผลลัพธ์ของนิพจน์สามารถเป็นวัตถุหรืออาร์เรย์นอกเหนือจากสตริง
2. ผูกคลาส HTML
โปรดทราบ: แม้ว่าคุณสามารถใช้แท็กหนวดในการผูกคลาสเช่น class="{{ className }}" เราไม่แนะนำวิธีการเขียนนี้และ v-bind:class สามารถเลือกได้เพียงหนึ่งในสองคน!
ไวยากรณ์วัตถุ
เราสามารถส่งวัตถุไปยัง v-bind:class เพื่อสลับคลาสแบบไดนามิก โปรดทราบว่า v-bind:class directive สามารถอยู่ร่วมกับคุณสมบัติคลาสทั่วไป:
<div v-bind: class = "{'class-a': isa, 'class-b': isb}"> </div> ข้อมูล: {isa: true, isb: false}แสดงเป็น:
<div> </div>
เมื่อ ISA และ ISB เปลี่ยนแปลงรายการคลาสจะได้รับการอัปเดตตามนั้น ตัวอย่างเช่นหาก ISB กลายเป็นจริงรายการคลาสจะกลายเป็น " static class-a class-b "
คุณสามารถผูกวัตถุโดยตรงในข้อมูล:
<div v-bind: class = "classobject"> </div>
ข้อมูล: {classObject: {'class-a': true, 'class-b': false}}นอกจากนี้เรายังสามารถผูกคุณสมบัติที่คำนวณได้ซึ่งส่งคืนวัตถุที่นี่ นี่เป็นโหมดที่ใช้กันทั่วไปและทรงพลัง
ไวยากรณ์อาร์เรย์
เราสามารถส่งอาร์เรย์ไปยัง v-bind:class เพื่อใช้รายการคลาส:
<div v-bind: class = "[classa, classb]">
ข้อมูล: {classa: 'class-a', classb: 'class-b'}แสดงเป็น:
<div> </div>
หากคุณต้องการสลับคลาสในรายการตามเงื่อนไขคุณสามารถใช้นิพจน์ ternary:
<div v-bind: class = "[classa, isb? classb: '']">
ตัวอย่างนี้จะเพิ่ม classa เสมอ แต่ classb เฉพาะในกรณีที่ ISB เป็นจริง
2. ผูกสไตล์อินไลน์
ไวยากรณ์วัตถุ
ไวยากรณ์วัตถุของ v-bind:style นั้นใช้งานง่ายมาก - มันดูคล้ายกับ 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'}}}ในทำนองเดียวกันไวยากรณ์วัตถุมักใช้ร่วมกับคุณสมบัติที่คำนวณได้ของวัตถุที่ส่งคืน
3. ไวยากรณ์อาร์เรย์
v-bind:style สามารถใช้วัตถุหลายสไตล์กับองค์ประกอบเดียว:
<div v-bind: style = "[styleobjecta, styleobjectb]">
เพิ่มคำนำหน้าโดยอัตโนมัติ
เมื่อ v-bind:style ใช้แอตทริบิวต์ CSS ที่ต้องการคำนำหน้าผู้ขายเช่นการแปลง, vue.js จะตรวจจับและเพิ่มคำนำหน้าที่สอดคล้องกันโดยอัตโนมัติ
4. สรุป
ข้างต้นเป็นเนื้อหาทั้งหมดของคลาส Vue.js ที่มีผลผูกพันและสไตล์สไตล์ที่รวบรวมไว้สำหรับคุณ บทความนี้มีรายละเอียดและมีค่าการเรียนรู้อ้างอิงบางอย่าง ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้ vue.js บรรณาธิการจะอัปเดตข้อมูลเกี่ยวกับ vue.js หนึ่งหลังจากนั้นอีก เพื่อนที่สนใจโปรดให้ความสนใจกับ wulin.com ต่อไป