属性class与:class

Posted 2021-03-24 yanl55555

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>