Small white learning Vue series directory

  • 1. Introduction
  • Learn Vue 2. Instruction
  • 3. Bind Class and Style
  • Vue 4. Conditional rendering and list rendering


Class

  • Object syntax

    Render:

    <div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
Copy the code

    Data:

    data: {
  isActive: true.hasError: false
}
Copy the code

    Results:

    <div class="static active"></div>
Copy the code

Summary: A key value pair inside an object, where the key represents className and the value represents whether the className is enabled. In addition, objects in expressions can be placed in data or computed.

  • Array syntax

    Render:

    <div v-bind:class="[activeClass, errorClass]"></div>
Copy the code

    Data:

    data: {
  activeClass: 'active'.errorClass: 'text-danger'
}
Copy the code

    Results:

    <div class="active text-danger"></div>
Copy the code

Summary: An element inside an array, that is, each className, can also define a ternary expression inside the array to determine whether it is enabled or not. In addition, if a custom component has classnames both inside and outside it, these classnames will not be overwritten but will coexist.

Style

Object syntax:

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
Copy the code
<div v-bind:style="styleObject"></div>
Copy the code

Array syntax:

<div v-bind:style="[baseStyles, overridingStyles]"></div>
Copy the code