属性class与:class

1.官方的案例

我们可以传给 v-bind:class 一个对象,以动态地切换 class

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

 

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActivetruthiness

你可以在对象中传入更多属性来动态切换多个 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>

posted @   研发之心  阅读(3148)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示