首页 > 其他分享 >vue添加css样式的方式

vue添加css样式的方式

时间:2023-02-02 14:58:42浏览次数:49  
标签:style vue 方式 样式 添加 css

vue添加css样式的方式

1、在.vue文件中引入css

<style scoped lang="scss" type="text/scss">   
  @import "../css/style.css";
</style>

 

2、直接在<style>中写

<style scoped lang="scss" type="text/scss">   
    .style {
        color: #000;
        ...
    }
</style>

 

3、不建议直接在元素标签上写样式,不方便后期维护

标签:style,vue,方式,样式,添加,css
From: https://www.cnblogs.com/Michelle20180227/p/17085979.html

相关文章

  • vue.js客服系统实时聊天项目开发(十七)解决url get传参后进行base64解密问题
    有些参数需要在url的GET里传递,但是为了防止特殊字符问题,我转成了base64编码。但是js进行解码的时候,总是报错:报错:Failedtoexecute'atob'on'Window':Thestringto......
  • css3各种度量单位 px、em、%、rem、vh/vw、vmin/vmax
    一px相对长度单位,浏览器的度量单位,相对于物理像素(显示器屏幕分辨率),1px在高清屏幕下可能占用2个物理像素、甚至3个物理像素,有关物理像素和px之间转换比,可以查看这......
  • 解决vite+vue3混合开发白屏问题
    开发环境:vite4.0+vue3.2使用场景:vite打包后将包嵌入app使用。问题描述:打包后app显示白屏。解决方案:默认的构建目标是能支持原生ESM语法的script标签、原生ESM动态导......
  • vue 获取 DOM 元素的方法
    1.原生js获取DOM节点document.querySelector(选择器)document.getElementById(id选择器)document.getElementsByClassName(class选择器)....2.vue2中获取当前组......
  • 快速上手vue前端存储库、全局状态管理工具pinia
    pinia是什么,为什么我们要使用pinia?pinia是vue全局状态管理工具,类似vueX,用于全局的数据状态存储、修改变更等等相较于vueX,pinia的使用较为简单,轻量级,上手容易,干掉了vue......
  • 总结了 Vue3 的七种组件通信方式,别再说不会组件通信了
    总结了Vue3的七种组件通信方式,别再说不会组件通信了播报文章网格化软件高品伟业2022-04-1916:35山东关注 写在前面  本篇文章是全部采用的......
  • vue-plugin-hiprint
    vue-plugin-hiprint(基于hiprint2.5.4)当时只是为了方便我(并非hiprint原作者)在vue项目中引入使用,所以以此命名。此插件仅仅是一个JavaScript【工具库】而非Vue【组件库......
  • ts找不到 ./APP.vue
    在使用vue3+ts中遇到如下问题解决方法:查看跟App.vue同级目录有没有env.d.ts文件,如果有则给里面添加以下代码declaremodule"*.vue"{importtype{DefineComp......
  • 饼状图,含富文本样式
    <!--折线图--><template><divclass="chartBox"><!--echart图标--><divid="lineChart"ref="lineChart":style="{width:width,height:height}"></div></div>......
  • css渐变动画
    鼠标放上去渐变div{width:100px;transition:width2s;-moz-transition:width2s;/*Firefox4*/-webkit-transition:width2s;/*Safari和Chrome*/-o-tran......