使用uniapp制作一个登录界面

满花楼

于 2024-08-05 18:05:44 发布

阅读量361

点赞数 8

文章标签： uni-app javascript

本文链接：https://blog.csdn.net/qq_51326715/article/details/140933477

版权

<template>
<view class="container">
  <view class="username"> <input type="text" v-model="username" placeholder="用户名" /> </view>
  <view class="password"> <input type="password" v-model="password" placeholder="密码" /> </view>
  <view class="denglu"> <button @click="login">登录</button></view>
</view>
</template>
 
<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      // 登录验证
      if (this.username === 'admin' && this.password === '123456') {
        uni.redirectTo({
          url: '/pages/index/index'
        });
      } else {
        uni.showToast({
          title: '登录失败，请检查用户名和密码',
          icon: 'none'
        });
      }
    }
  }
};
</script>

<style scoped>

.container{
	position: absolute;
	justify-content: center;
    flex-direction:column;
    left: 0;
	right: 0;
	top: 260px;
}

</style>