“This is the 18th day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021.”

1. Binding styles

1. The style of the class

1. String writing

The class name for the style is uncertain and needs to be specified dynamically.

<div class="basic" :class="mood" @click="changeMood">{{name}}</div>
Copy the code
data: {
    mood: 'normal',}Copy the code

2. Array writing

<div class="basic" :class="classArr">{{name}}</div>
Copy the code
data: {
    classArr: ['color1'.'color2'.'color3']}Copy the code

3. Object writing

<div class="basic" :class="classObj">{{name}}</div>
Copy the code
data: {
    classObj: {
        color1: false.color2: false}},Copy the code

Inline style

1. Object writing

<div class="basic" :style="styleObj">{{name}}</div>
Copy the code
data: {
    styleObj: {
        fontSize: '40px'.color: 'red'
    },
    styleObj2: {
        backgroundColor: 'orange'}}Copy the code

2. Array writing

<div class="basic" :style="styleArr">{{name}}</div>
Copy the code
data: {
    styleArr: [{fontSize: '40px'.color: 'blue'
        },
        {
            backgroundColor: 'gray'}}]Copy the code

2. Conditional rendering

1. v-if

The V-if directive is used to conditionally render a piece of content, rendering only when the expression returns true:

<h2 v-if="n === 1">1</h2>
Copy the code

Similarly, expressions can fetch data from data.

We can also add an else block with v-else:

<h2 v-if="n === 1">1</h2>
<h2 v-else>2</h2>
Copy the code

You can also use v-else-if:

<div v-if="n === 1">111</div>
<div v-else-if="n === 2">222</div>
<div v-else-if="n === 3">333</div>
<div v-else>other</div>
Copy the code

If you want to switch between multiple elements, you can treat a

<template v-if="ok">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</template>
Copy the code

2. Use keys to manage reusable elements

If two parts have the same elements when switching between elements to render using V-if, Vue will reuse them and not re-render them:

<template v-if="loginType === 'username'">
    <input placeholder="Enter your username" />
</template>
<template v-else>
    <input placeholder="Enter your email address" />
</template>
Copy the code

If you don’t want Vue to reuse them, simply add a key attribute with a unique value:

<template v-if="loginType === 'username'">
    <input placeholder="Enter your username" key="username-input" />
</template>
<template v-else>
    <input placeholder="Enter your email address" key="email-input" />
</template>
Copy the code

3. v-show

The V-show directive can also be used to display elements by condition:

<h1 v-show="ok">Hello!</h1>
Copy the code

The difference is that elements with v-show are always rendered and remain in the DOM. V-show simply adds display: None to the element.

  • V-if: True conditional rendering, DOM nodes disappear
  • V-show: just add display: none
  • Template is valid only on V-if

4. Compare v-if with V-show

  • v-ifTrue rendering, which causes components to be destroyed and rebuilt
  • v-ifIs inert when the instruction expression istrueWill start rendering elements
  • whilev-showNo matter what the initial conditions are, the elements are rendered, and it’s just a simple CSS switch.

In summary, V-if has a higher switching overhead, while V-show has a higher initial rendering overhead.