屬性class與:class

1.官方的案例

我們可以傳給 v-bind:class 一個對象，以動態地切換 class

<div v-bind:class="{ active: isActive }"></div>

 

上面的語法表示 active 這個 class 存在與否將取決於數據屬性 isActive 的 truthiness。

你可以在對象中傳入更多屬性來動態切換多個 class。此外，v-bind:class 指令也可以與普通的 class 屬性共存。當有如下模板:

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

 

和如下 data：

data: {
  isActive: true,
  hasError: false
}

 

結果渲染為：

<div class="static active"></div>

當 isActive 或者 hasError 變化時，class 列表將相應地更新。

例如，如果 hasError 的值為 true，class 列表將變為 "static active text-danger"。

【注意】根據value渲染成key

2. :class也可以指定模板的顯示與隱藏

這里我為了突出:class的用法加粗了部分代碼

<template>

  <div class="loginContainer">

    <div class="loginInner">

      <div class="login_header">

        <div class="login_logo">荔枝外賣</div>

        <div class="login_header_title">

          <a href="javascript:;" :class="{on:loginWay}" @click="loginWay=true">短信登錄</a>

          <a href="javascript:;" :class="{on: !loginWay}" @click="loginWay=false">密碼登錄</a>

        </div>

      </div>

      <!-- 內容部分 -->

      <div class="login_content">

        <form @submit.prevent="login">

          <!-- 短信登錄 -->

          <div :class="{on: loginWay}">

            <section class="login_message">

              <input type="tel" maxlength="11" placeholder="手機號" v-model="phone" />

              <button

                :disabled="!rightPhone"

                class="get_verification"

                :class="{right_phone:rightPhone}"

                @click.prevent="getCode"

              >{{computeTime>0 ? `(${computeTime}s)已發送` : '獲取驗證碼'}}</button>

            </section>

            <section class="login_verification">

              <input type="tel" maxlength="8" placeholder="驗證碼" v-model="code" />

            </section>

            <section class="login_hint">

              溫馨提示：未注冊荔枝外賣帳號的手機號，登錄時將自動注冊，且代表已同意

              <a href="javascript:;">《用戶服務協議》</a>

            </section>

          </div>

</template>