前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【干货】Vue TypeScript根据类生成签名字符串

【干货】Vue TypeScript根据类生成签名字符串

作者头像
Vaccae
发布2019-07-25 11:19:19
6680
发布2019-07-25 11:19:19
举报
文章被收录于专栏:微卡智享微卡智享

前言

前阵子我们做了C#和Android的根据类生成签名,文章详见:

【干货】C#根据类生成签名字符串(附DEMO下载地址)

【干货】Android根据类生成签名字符串

今天我们来说一下VueJs里根据类生成签名,标题里面说了TypeScript是因为语法相对于JavaScript严格的多,导致里面一个小问题又花费了我一两天的时间,这个后面现说。

视频Demo演示

视频内容

核心代码

代码语言:javascript
复制
   getsign<T>(para: T): string {
        let signstr = "";
 //获取泛型类的属性并排序按ASCII码排序
        let params = Object.keys(para).sort();
 //排序后的泛型类进行遍历
        for (let ki in params) {
            let name = params[ki];
            console.log(name);
 //遍历泛性原来的泛型类找到对应的属性
            for (let prop in para) {
 //如果名称一样进行字符串拼接并跳出循环
                if (prop == name) {
                    signstr = signstr + name + "="
                        + para[prop] + "&";
                    break;
                }
            }
        }
 //截断字符串最后一位
        signstr = signstr.substr(0, signstr.length - 1);
        return signstr;
    }

代码演示

我们前一章用了定义的类的讲解《VueJs里定义类去引用实现赋值加页面刷新》,所以这次直接在这个项目中加入签名的调用。

建Product类

test.ts里代码

我们在test.ts文件里面加入一个方法getsign(),代码就是上面的核心代码

然后我们定义一个字符串类型,和一个按钮事件,按钮事件里面getsign里面传入我们的Product类,返回的字符串赋值给str里面。

test.vue.html

里面str字符串双向绑定,然后新建了一个按钮click事件指向btnsign


演示效果

未点击签名效果

点击签名后的效果


-END-

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-06-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 微卡智享 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档