构造一个函数能将border-bottom-color用函数转成驼峰命名法,就是变成:borderBottomColor输出

本文介绍了一个简单的JavaScript函数,该函数可以将使用短横线分隔的字符串转换为每个单词首字母大写的格式。通过示例演示了如何将'border-bottom-color'这样的CSS属性名转换为更易读的形式。

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">

        function transform(str){
            var arr = str.split('-');
            //console.log(arr);
            for(var i=0;i<arr.length;i++){
                arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substring(1);
            }

            //console.log(arr);
            //return arr.join('');
            alert(arr.join('')) 
        }

        //调用函数
        var str = "border-bottom-color";
        transform(str);
    </script>
</html>
import React from 'react'; import type {FC} from 'react'; import {NavBar, TabBar} from 'antd-mobile'; import { Route, useLocation, useNavigate, MemoryRouter as Router, } from 'react-router-dom'; import { AppOutline, MessageOutline, UnorderedListOutline, UserOutline, } from 'antd-mobile-icons'; import {StyleSheet, Switch} from 'react-native'; const Bottom: FC = () => { const location = useLocation(); const {pathname} = location; const navigate = useNavigate(); const setRouteActive = (value: string) => { navigate(value); }; const tabs = [ { key: '/home', title: '首页', icon: <AppOutline />, }, { key: '/todo', title: '待办', icon: <UnorderedListOutline />, }, { key: '/message', title: '消息', icon: <MessageOutline />, }, { key: '/me', title: '我的', icon: <UserOutline />, }, ]; return ( <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}> {tabs.map(item => ( <TabBar.Item key={item.key} icon={item.icon} title={item.title} /> ))} </TabBar> ); }; export default () => { return ( <Router initialEntries={['/home']}> <div style={styles.app}> <div style={styles.top}> <NavBar>配合路由使用</NavBar> </div> <div style={styles.body}> <Switch> <Route path="/home"> <Home /> </Route> <Route path="/todo"> <Todo /> </Route> <Route path="/message"> <Message /> </Route> <Route path="/me"> <PersonalCenter /> </Route> </Switch> </div> <div style={styles.bottom}> <Bottom /> </div> </div> </Router> ); }; function Home() { return <div>首页</div>; } function Todo() { return <div>待办</div>; } function Message() { return <div>消息</div>; } function PersonalCenter() { return <div>我的</div>; } const styles = StyleSheet.create({ app: { height: '100%', display: 'flex', flexDirection: 'column', }, top: { flex: 0, borderBottomWidth: 1, borderBottomColor: 'var(--adm-color-border)', }, body: { flex: 1, justifyContent: 'center', alignItems: 'center', }, bottom: { flex: 0, borderTopWidth: 1, borderTopColor: 'var(--adm-color-border)', }, }); 这个你检查下,这个好像没有导出,我准备直接在app.tsx引用,直接加载
最新发布
03-08
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值