开发指南069-设置样式

简介: 平台中设置样式有如下方法:

平台中设置样式有如下方法:

一、通过style来设置

    1、直接设置

         <div style="border: 1px solid black;"></dev>

    2、通过一个变量设置

        <div :style="borderStyle"> </div>

        export default {

            data() {

               return {

                     borderStyle: { border: '1px solid black' }

               };

            }

        };

  3、通过1个函数来动态设置

     <div :style="getBorderStyle()"></div>

export default {

 methods: {

   getBorderStyle() {

     return {

       border: '1px solid black'

     };

   }

 }

};

二、通过class来设置

1、直接设置

<div class="bordered-div"></div>

.bordered-div {

 border: 1px solid black;

}

2、通过变量来设置

<div :class="borderClass"></div>

export default {

 data() {

   return {

     borderClass: 'bordered-div'

   };

 }

};

.bordered-div {

 border: 1px solid black;

}

还有其他组合模式,平台不再推荐使用。平台开发人员禁止玩弄别人不熟悉的技巧

相关文章
|
9天前
|
UED 开发者
鸿蒙next版开发:ArkTS组件通用属性(图片边框设置)
在HarmonyOS 5.0中,ArkTS提供了灵活的图片边框设置属性,使开发者可以为应用中的图片组件添加各种边框效果,提升视觉效果和用户体验。本文详细解读了ArkTS中图片边框设置的通用属性,并提供了示例代码。通过设置`borderImage`属性,可以控制边框的图源、切割宽度、边框宽度、延伸距离、平铺模式和是否填充。示例代码展示了如何使用这些属性来创建具有不同边框效果的图片组件。图片边框设置在美化界面、区分内容和增强交互方面有重要作用。
28 5
|
9天前
|
UED 开发者
鸿蒙next版开发:ArkTS组件通用属性(边框设置)
在HarmonyOS 5.0中,ArkTS提供了丰富的边框设置属性,允许开发者自定义组件的边框样式,提升应用的视觉效果和用户体验。本文详细解读了border属性的使用方法,并提供了示例代码,展示了如何设置不同边的边框宽度、颜色、圆角和样式。边框设置在UI开发中具有重要作用,如区分组件、强调重要元素和美化界面。
36 6
开发指南055-根据内容选择样式
平台除了提供各种组件、接口外,更重要的是规定解决方式,就是什么场景用什么解决方案
|
6月前
|
移动开发
【实用】一组原创原生样式的基础控件、UI组件样式(偏向移动端H5页面的样式)
【实用】一组原创原生样式的基础控件、UI组件样式(偏向移动端H5页面的样式)
【实用】一组原创原生样式的基础控件、UI组件样式(偏向移动端H5页面的样式)
|
6月前
|
开发框架 前端开发 搜索推荐
标题:【专栏:CSS进阶篇】CSS样式重置与框架:快速构建统一风格的网页
【4月更文挑战第30天】本文探讨了CSS样式重置和框架在确保网页跨浏览器一致性中的作用。样式重置通过消除默认样式差异实现一致外观,而CSS框架如Bootstrap提供预设样式和组件,加速开发并保证页面一致性。框架还有响应式设计和易于维护的优点,但也可能限制自定义和增加性能开销。选择使用哪种工具应根据项目需求、团队技能和设计复杂度来决定。开发者可结合使用两者以平衡灵活性和控制。
58 0
|
6月前
|
前端开发 小程序
uniapp 将标题背景更换背景图片 完美解决(附加源码+实现效果图)
uniapp 将标题背景更换背景图片 完美解决(附加源码+实现效果图)
841 0
|
数据安全/隐私保护 计算机视觉
qss样式表笔记大全(三):可设置样式的窗口部件列表(中)(持续更新示例) 一
qss样式表笔记大全(三):可设置样式的窗口部件列表(中)(持续更新示例)
qss样式表笔记大全(三):可设置样式的窗口部件列表(中)(持续更新示例) 一
|
计算机视觉
qss样式表笔记大全(四):可设置样式的窗口部件列表(下)(持续更新示例)一
qss样式表笔记大全(四):可设置样式的窗口部件列表(下)(持续更新示例)
qss样式表笔记大全(四):可设置样式的窗口部件列表(下)(持续更新示例)一
qss样式表笔记大全(四):可设置样式的窗口部件列表(下)(持续更新示例)二
qss样式表笔记大全(四):可设置样式的窗口部件列表(下)(持续更新示例)
qss样式表笔记大全(四):可设置样式的窗口部件列表(下)(持续更新示例)二
|
计算机视觉
qss样式表笔记大全(二):可设置样式的窗口部件列表(上)(持续更新示例)
qss样式表笔记大全(二):可设置样式的窗口部件列表(上)(持续更新示例)
qss样式表笔记大全(二):可设置样式的窗口部件列表(上)(持续更新示例)