属性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>