【原理】vue的v-if和v-else、v-bind实现的登录界面案例

最新推荐文章于 2024-09-07 18:24:38 发布

一只红薯

最新推荐文章于 2024-09-07 18:24:38 发布

阅读量1.8k

点赞数

分类专栏： vuejs 文章标签：前端 vue

本文链接：https://blog.csdn.net/bridgethsin/article/details/78813549

版权

本文通过一个登录界面案例，介绍如何使用Vue的v-if/v-else指令和v-bind绑定属性，实现在输入用户名和密码后改变登录按钮颜色的功能。

摘要由CSDN通过智能技术生成

前几天做了，今天又忘记了。所以再看一看。

要求：

在输入用户名和密码后，按钮颜色发生变化。

<template>
  <div class="login">
    <div class="input-group">
      <!-- v-if和v-else实现不同样式转换 -->
      <span class="spanfont" v-if="username"><i class="fa fa-user"></i></span>
      <span v-else><i class="fa fa-user"></i></span>
      <input type&#