python 字符串补全填充固定长度(补0)的三种方法

博客围绕文本对齐(Text Justification)展开,虽未详细阐述具体内容,但明确提及该主题,且关联到Python技术。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

text justification

'''
原字符串左侧对齐, 右侧补零:
'''
str.ljust(width,'0') 
input: '789'.ljust(32,'0')
output: '78900000000000000000000000000000'


'''
原字符串右侧对齐, 左侧补零:
方法一:
'''
str.rjust(width,'0') 
input: '798'.rjust(32,'0')
output: '00000000000000000000000000000798'
'''
方法二:
'''
str.zfill(width)
input: '123'.zfill(32)
output:'00000000000000000000000000000123'
'''
方法三:
'''
'%07d' % n
input: '%032d' % 89
output:'00000000000000000000000000000089'
### 关于 Vue3 实现登录界面的示例教程 #### 创建 Vue3 项目并配置环境 为了创建一个基于 Vue3 的登录界面,首先需要准备开发环境。这涉及到安装 `vue-cli` 脚手架工具来快速搭建项目框架[^3]。 ```bash npm install -g vue-cli ``` 接着通过命令行初始化一个新的 Vue 项目: ```bash vue create my-project-name cd my-project-name ``` #### 安装必要的依赖库 为了让应用更加完善,通常还会引入一些常用的 UI 库和技术栈组件,比如 Element Plus 提供丰富的预设样式和交互控件;Axios 用于发起 HTTP 请求;Pinia 则作为状态管理器替代 Vuex[^1]。 ```bash npm install element-plus axios pinia eslint ``` #### 编写登录页面模板结构 在 src/views 文件夹下新建 Login.vue 组件文件,定义基本 HTML 结构如下所示: ```html <template> <el-form :model="form" status-icon ref="ruleFormRef"> <!-- 用户名输入框 --> <el-form-item prop="username"> <el-input v-model.trim="form.username"></el-input> </el-form-item> <!-- 密码输入框 --> <el-form-item prop="password"> <el-input type="password" autocomplete="off" show-password v-model.trim="form.password"></el-input> </el-form-item> <!-- 登录按钮 --> <el-button type="primary" @click.prevent="login">Login</el-button> </el-form> </template> ``` 这里利用了 `<el-form>` 和其他来自 Element Plus 的表单项标签,并且借助 `v-model` 指令实现了数据双向绑定功能,使得当用户修改输入框内的内容时能够自动更新到对应的 JavaScript 变量上[^2]。 #### 添加业务逻辑处理函数 继续充上述代码中的 script 部分,完成具体的验证流程与网络请求操作: ```javascript <script lang="ts"> import { defineComponent } from 'vue' import { useStore } from '@/store/index' // 假定已设置好 Pinia Store import router from '@/router' export default defineComponent({ data() { return { form: { username: '', password: '' } }; }, methods: { async login() { const store = useStore(); try { await store.dispatch('auth/login', this.form); router.push('/'); } catch (error) { console.error(error.message || 'An unknown error occurred.'); } } } }) </script> ``` 此部分展示了如何结合 TypeScript 类型声明编写异步方法来进行身份认证校验,并根据返回结果决定跳转至首页还是显示错误提示信息。 #### 设置路由规则 最后一步是在 main.js 或者单独建立 routes.ts 中加入对应路径映射关系,确保访问 `/login` 地址时能正确渲染刚才制作好的视图组件。 ```typescript // example of setting up route configuration with Vue Router const routes = [ ... { path: '/login', name: 'Login', component: () => import('@/views/Login.vue') }, ... ]; ``` 以上就是完整的使用 Vue3 构建简单登录系统的步骤说明,涵盖了从零开始直到最终部署上线所需经历的主要环节。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值