scoped样式修饰符的使用

news2024/11/25 4:03:22

在这里插入图片描述

在Vue.js中,scoped 是一个用于样式的修饰符,它用于限定样式的作用范围,使得样式只在当前组件的作用域内生效,而不会影响到父组件或子组件的样式。这个特性通常用于解决 CSS 样式污染的问题,确保样式只会影响到当前组件的 DOM 元素。

Scoped 样式的基本用法

在Vue组件的<style>标签中使用scoped属性,可以将样式限定在当前组件的作用域内。示例代码如下:

<template>
  <div class="app">
    <h1>Vue Scoped Styles</h1>
    <button @click="toggleColor">Toggle Color</button>
    <p class="global-style">大家好,我是IT小辉同学!!!</p>
    <p class="scoped-style">希望与大家一起学习,成长!!!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isRed: false,
    };
  },
  methods: {
    toggleColor() {
      this.isRed = !this.isRed;
    },
  },
};
</script>

<style scoped>
/* Scoped styles */
p {
  color: blue;
}

/* Global styles */
.global-style {
  font-weight: bold;
}

/* Conditional styling */
.scoped-style {
  color: red;
}
</style>

在上面的示例中,<style scoped> 标签中的样式只会应用于当前组件的<p>元素,而不会影响到全局样式或其他组件中的元素。

示例1:条件样式绑定

<template>
  <div>
    <p :class="{ 'red-text': isRed }">热爱,就要坚持,勇往直前!!!</p>
    <button @click="toggleColor">相信梦想!!!</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isRed: false,
    };
  },
  methods: {
    toggleColor() {
      this.isRed = !this.isRed;
    },
  },
};
</script>

<style scoped>
.red-text {
  color: red;
}
</style>

上面的示例中,<p> 元素的样式会根据 isRed 变量的值而改变。这个样式只会影响到当前组件的<p>元素,不会影响到其他组件。

示例2:组件嵌套

<template>
  <div>
    <h2>把我的故事讲给你听。。。。。。</h2>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
};
</script>

<style scoped>
h2 {
  color: blue;
}
</style>

在这个示例中,父组件的样式只会影响到父组件内的元素,而不会影响到子组件 ChildComponent 内的元素。

示例3:深度选择器

在Vue中,你还可以使用 ::v-deep/deep/ 伪类来影响子组件中的样式。这是一个例子:

<template>
  <div>
    <h2>希望我们都能够勇敢一些。。。。。。</h2>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
};
</script>

<style scoped>
::v-deep h2 {
  color: blue;
}
</style>

这会影响到子组件 ChildComponent 中的 <h2> 元素的样式。

上面几个示例都非常详细的帮助大家了解了一下怎么使用scoped,以及其作用。scoped 样式是Vue.js中用于隔离组件样式的一种非常有用的特性,可以确保组件样式不会影响全局样式或其他组件,从而提高了代码的可维护性和可重用性。希望大家可以经常使用,同时,深入了解!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/988417.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

spring---第三篇

系列文章目录 文章目录 系列文章目录一、BeanFactory和ApplicationContext有什么区别?二、描述一下Spring Bean的生命周期?一、BeanFactory和ApplicationContext有什么区别? ApplicationContext是BeanFactory的子接口 ApplicationContext提供了更完整的功能: ①继承Messag…

vue开发-语法和基础流程规范

当一个请求发生的时候 后端的扭转流程对标前端的扭转过程 ***vue 中 整体url触发整体流程服务流程&#xff1a; node 中定义了默认加载 vue.config.js 文件 &#xff08;vue.config.js 文件名不可更改&#xff09;-> vue.config.js 中 devServer 绑定了个 ip端口 和资源 -》…

科技资讯|苹果Vision Pro获得被动冷却系统及数字表冠控制界面专利

据patentlyapple报道&#xff0c;美国专利商标局正式授予苹果一项与头戴式设备&#xff08;Apple Vision Pro&#xff09;相关的专利11751366&#xff0c;该设备可以提供被动冷却系统&#xff0c;利用光学组件的表面来管理热量&#xff0c;而不会对用户显示的视觉信息产生不利影…

uniGUI使用客户端布局制作工具条

uniGUI使用客户端布局制作工具条 如上图&#xff0c;我想制作一个工具条&#xff0c;上面放四个按钮&#xff0c;每个按钮占工具条25%的宽度。 先放置一个UniContainerPanel&#xff0c;把他视为工具条的容器&#xff0c;然后对他做如下设置&#xff1a; 1.AlignalTop 2.Ali…

【ARM CoreLink 系列 2 -- CCI-400 控制器简介】

文章目录 CCI-400 介绍DVM 机制介绍DVM 消息传输过程TOKEN 机制介绍 下篇文章&#xff1a;ARM CoreLink 系列 3 – CCI-550 控制器介绍 CCI-400 介绍 CCI&#xff08;Cache Coherent Interconnect&#xff09;是ARM 中 的Cache一致性控制器。 CCI-400 将 Interconnect 和coh…

【Hello Algorithm】贪心算法

本篇博客介绍&#xff1a; 简单介绍下贪心算法 贪心算法 介绍贪心算法最小字典序的字符串拼接最多会议数切棍子的最小成本IPO灯塔问题 介绍贪心算法 贪心算法是一种极具有自然智慧的算法 它会使用以一种局部最功利的标准来做出一个当前看来最好的选择 如果说我们根据局部最优…

Spring基础及IoC容器的理解

Spring概念&#xff1a; 通常所说的Spring指的是Spring Framewprk(Spring框架)&#xff0c;它是一个开源的框架。用一句话概括就是&#xff1a;Spring是包含了众多工具方法的IoC容器。 什么是容器&#xff1f; 容器是用来容纳某种物品的装置&#xff0c;在之前的学习中&…

运动蓝牙耳机哪个品牌好、运动蓝牙耳机推荐

随着健康生活理念的广泛普及&#xff0c;对于很多人来说&#xff0c;运动已经成为他们日常生活不可或缺的重要组成部分。在激情四溢的健身运动中&#xff0c;我们既能够放松身心&#xff0c;减轻工作压力&#xff0c;又能够强健身体&#xff0c;增强免疫力&#xff0c;可谓一举…

代码随想录第31天 | 435. 无重叠区间 ● 763.划分字母区间 ● 56. 合并区间

435. 无重叠区间 /*** param {number[][]} intervals* return {number}*/ var eraseOverlapIntervals function(intervals) {intervals.sort((x,y)>(x[1]-y[1]))let r1for(let i0;i<intervals.length-1;i){//重叠if(intervals[i][1]>intervals[i1][0]){intervals[i…

向量数据库Milvus Cloud 2.3 工具升级: 解锁全新的运维功能

Milvus Cloud 2.3 已经发布,并且带来了一系列令人激动的新功能和升级。在这次升级中,Birdwatcher工具也得到了全面升级,为用户提供了更多强大的功能和更便捷的操作方式。在这篇文章中,我们将深入探讨Birdwatcher工具的升级内容,并带您一览Milvus Cloud 2.3的运维新特性。 …

2023数学建模国赛E题黄河水沙监测数据分析完整代码分析+处理结果+思路文档

已经写出国赛E题黄河水沙监测数据分析完整代码分析处理结果思路分析&#xff08;30页&#xff09;&#xff0c;包括数据预处理、数据可视化&#xff08;分组数据分布图可视化、相关系数热力图可视化、散点图可视化&#xff09;、回归模型&#xff08;决策树回归模型、随机森林回…

JAVA培训-核心概念学习

JAVA培训-核心概念 1. SpringBoot 1.1 理清概念(Spring、SpringMvc、SpringBoot、SpringCloud) 1、Spring Spring是一个开源容器框架&#xff0c;可以接管web层&#xff0c;业务层&#xff0c;dao层&#xff0c;持久层的组件&#xff0c;并且可以配置各种bean,和维护bean与…

【用unity实现100个游戏之10】复刻经典俄罗斯方块游戏

文章目录 前言网格生成Block方块脚本俄罗斯方块基类&#xff0c;绘制方块形状移动逻辑限制移动自由下落下落后设置对应风格为不可移动类型检查当前方块是否可以向指定方向移动旋转逻辑消除逻辑游戏结束逻辑怪物生成源码参考完结 前言 当今游戏产业中&#xff0c;经典游戏的复刻…

基于SSM的校园美食交流系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用Vue技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

开开心心带你学习MySQL数据库之第六篇下

插入查询结果 把查询和新增联合起来. 把查询结果作为新增的数据 例子:把student1表的查询结果作为新增数据插入到student2表中. create table student1(id int, name varchar(20));create table student2(id int, name varchar(20));insert into student1 values(1, 张三), (2…

NFT 合约部署教程

本篇文章主要介绍如何将您的 NFT(ERC-721 Token) 通过智能合约部署到去中心化网络中 Init Project //创建一款ocean的NFT mkdir nft-ocean//进入目录 cd nft-ocean//初始化项目&#xff0c;根据提示填写即可&#xff0c;packname和description填写即可 npm init//添加hardhat…

【JAVA】Object类与抽象类

作者主页&#xff1a;paper jie_的博客 本文作者&#xff1a;大家好&#xff0c;我是paper jie&#xff0c;感谢你阅读本文&#xff0c;欢迎一建三连哦。 本文录入于《JAVASE语法系列》专栏&#xff0c;本专栏是针对于大学生&#xff0c;编程小白精心打造的。笔者用重金(时间和…

批量剪辑神器:AI智剪技巧全攻略

在视频剪辑的工作流程中&#xff0c;效率和质量都是至关重要的。有时候&#xff0c;我们需要对大量的视频进行剪辑&#xff0c;这可能会耗费大量的时间和人力。然而&#xff0c;随着技术的发展&#xff0c;AI智能剪辑工具如固乔智剪软件的出现&#xff0c;大大提高了剪辑的效率…

架构师之如何定位问题

1. 什么是问题 很多人对问题的理解不一样&#xff0c;有人认为问题就是解决方案中的难点&#xff0c;有人认为问题是现实和目标的差距&#xff0c;这些解读我觉得都还不够精确&#xff0c;尝试从毛主席的矛盾论中得到比较合理的解释&#xff1a; 问题就是事物的矛盾。哪里有没…

Ubuntu22.04 安装 MongoDB 7.0

稍微查了一些文章发现普遍比较过时。有的是使用旧版本的Ubuntu&#xff0c;或者安装的旧版本的MongoDB。英语可以的朋友可以移步Install MongoDB Community Edition on Ubuntu — MongoDB Manual&#xff0c;按照官方安装文档操作。伸手党或者英语略差的朋友可以按照本文一步步…