开发指南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;

}

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

相关文章
|
10月前
|
Android开发
在mPaaS框架中,要自定义通知栏背景色
【1月更文挑战第13天】【1月更文挑战第65篇】在mPaaS框架中,要自定义通知栏背景色
69 1
|
4月前
|
UED 开发者
鸿蒙next版开发:ArkTS组件通用属性(图片边框设置)
在HarmonyOS 5.0中,ArkTS提供了灵活的图片边框设置属性,使开发者可以为应用中的图片组件添加各种边框效果,提升视觉效果和用户体验。本文详细解读了ArkTS中图片边框设置的通用属性,并提供了示例代码。通过设置`borderImage`属性,可以控制边框的图源、切割宽度、边框宽度、延伸距离、平铺模式和是否填充。示例代码展示了如何使用这些属性来创建具有不同边框效果的图片组件。图片边框设置在美化界面、区分内容和增强交互方面有重要作用。
182 5
|
4月前
|
UED 开发者
鸿蒙next版开发:ArkTS组件通用属性(边框设置)
在HarmonyOS 5.0中,ArkTS提供了丰富的边框设置属性,允许开发者自定义组件的边框样式,提升应用的视觉效果和用户体验。本文详细解读了border属性的使用方法,并提供了示例代码,展示了如何设置不同边的边框宽度、颜色、圆角和样式。边框设置在UI开发中具有重要作用,如区分组件、强调重要元素和美化界面。
357 6
开发指南055-根据内容选择样式
平台除了提供各种组件、接口外,更重要的是规定解决方式,就是什么场景用什么解决方案
|
10月前
|
移动开发
【实用】一组原创原生样式的基础控件、UI组件样式(偏向移动端H5页面的样式)
【实用】一组原创原生样式的基础控件、UI组件样式(偏向移动端H5页面的样式)
【实用】一组原创原生样式的基础控件、UI组件样式(偏向移动端H5页面的样式)
|
8月前
uniapp 添加自定义图标
uniapp 添加自定义图标
248 0
|
10月前
|
前端开发 小程序
uniapp 将标题背景更换背景图片 完美解决(附加源码+实现效果图)
uniapp 将标题背景更换背景图片 完美解决(附加源码+实现效果图)
1079 0
|
10月前
|
开发框架 Dart 容器
Flutter 自定义渐变按钮 GradientButton
Flutter 自定义渐变按钮 GradientButton Flutter 是一种流行的跨平台移动应用开发框架。Flutter 提供了许多内置的小部件,但有时您可能需要创建自己的小部件以满足特定的需求。这个文档将介绍如何创建一个自定义渐变按钮小部件 GradientButton。
171 0
|
小程序
uniapp悬浮图标支持拖动支持微信小程序
uniapp悬浮图标支持拖动支持微信小程序
171 0
|
移动开发
H5 页面设置了字体的粗细样式,但是在华为手机里微信打开访问样式不生效?
H5 页面设置了字体的粗细样式,但是在华为手机里微信打开访问样式不生效?
351 0
H5 页面设置了字体的粗细样式,但是在华为手机里微信打开访问样式不生效?

热门文章

最新文章