项目总结

最新推荐文章于 2024-11-22 22:22:26 发布

四叶草的IT小业

最新推荐文章于 2024-11-22 22:22:26 发布

阅读量189

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/dashen_me/article/details/103903386

本文介绍了前端开发中的一些实用技巧，包括使用CSS实现特定布局效果，JavaScript数组排序方法，Vue中动态属性设置的最佳实践，以及如何确保DOM更新后的操作正确执行。同时，还探讨了在固定布局中处理弹窗显示的问题，以及组件复用时的状态管理策略。

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

1，图示效果 css

 //html
<p class="desp"><span class="descon1 fontCss2">质押保障：</span><span class="fontCss3">债券质押</span> </p>

//css

.desp{
padding-left:5em;
}
.descon1{
margin-left:-5em;
}
//原理  整个内容 左padding5em（5个文字距离） ，第一个在回来，第二个正常换行

2.sort 排序

//按一个参数排序
 this.items = this.items.sort((a, b) => {
          return parseInt(a.gh_days) - parseInt(b.gh_days)
 })

、、两个参数
 this.items = this.items.sort((a, b) => {
          if (parseInt(a.gh_days) == parseInt(b.gh_days)) {
            return a.remaindays - b.remaindays
          }
          return parseInt(a.gh_days) - parseInt(b.gh_days)
        })

3.某一个变量对象类型，继续添加key/value

this.$set(this.minViewData, 'buyflag', this.items[index].buyflag)
this.$set(this.minViewData, 'bondavlamt',
 this.items[index].bondavlamt ? this.items[index].bondavlamt:'')

//set的时候，一定要注意后面赋值的变量有没有，可以用三元运算符添加个判断，不然容易报错。

this.$nextTick(() => {
                this.$refs.childAutho.usedInPar();
     })

//执行子组件的某个函数，可能会因为dom没有渲染而失败，加个nexttick，等dom渲染之后 执行。

5.页面一个弹框固定住头部和底部，因为弹框已经绝对定位或者固定定位了，你直接固定头部和底部可能会出错，你还要再在弹框里面写一个div,包住弹框里面的内容。就可以了。给他个height

6.如果一个组件被复用很多次，初始化的数据会变，建议，父调用子组件初始化。不然可能传值数据没有刷新。

给一个变量赋值的时候，如果给他加 ||，一定要考虑他有没有0的可能，因为0也是没有。