Vue学习之--------Scoped样式(2022/8/1)

简介: 这篇文章介绍了在Vue开发中单页面文件中使用`scoped`属性来避免样式冲突的方法和效果。

1、场景

一个页面开发团队进行页面的开发设计、无可避免的会发生样式选择器命名的重复(id的重复、class的重复等)。这样间接导致的后果就是、自己的页面样式好好的、在整合一起的时候、可能就会发生样式的错乱、怎样解决这个问题呢? 很简单、在vue中单页面文件样式中加上scoped

2、错误的使用

假设现在编写的组件使用了相同的class命名。在进行页面设计时、想要达到的效果是、组件有自己的样式
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3、错误效果展示

在这里插入图片描述

4、改进 在style标签中加上scoped属性

  1. 作用:让样式在局部生效,防止冲突。
  2. 写法:<style scoped>

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述


5、改进后的效果

在这里插入图片描述

6、开发提示

在进行单页面开发时、为了保证页面样式。最好在样式中加上scoped属性。只在当前页面有效果

目录
打赏
0
0
0
0
212
分享
相关文章
|
21天前
|
vue使用iconfont图标
vue使用iconfont图标
111 1
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
10 1
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
65 18
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1070 0
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
57 1
vue学习第一章
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
53 1

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等