/**PageBeginHtml Block Begin **/ /***自定义返回顶部小火箭***/ /*生成博客目录的JS 开始*/ /*生成博客目录的JS 结束*/

Vue 中组件的局部css样式配置：scoped样式

* 博客文章部分截图及内容来自于学习的书本及相应培训课程以及网络其他博客，仅做学习讨论之用，不做商业用途。
* 如有侵权，马上联系我，我立马删除对应链接。
* @author Alan
* @Email no008@foxmail.com

 

正文



Vue 中组件的局部css样式配置：scoped样式

1：说明：


<!--
 ## scoped样式

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


2：代码结构

image


3：代码内容

index.html

复制代码
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 针对ie浏览器的一个特殊配置，含义是让ie浏览器以最高的渲染级别进行渲染界面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 开启移动端理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 配置页签的图标 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 配置网页的标题：找 package.json文件里的 "name": "vue_test" 值 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- 如果浏览器不支持js，则该标签的元素里的内容将会被渲染 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- 容器 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
复制代码


vue.config.js


const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false /*关闭语法检查*/
})


main.js


复制代码
 //引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue生产提示
Vue.config.productionTip=false;

// 创建Vm
const vm = new Vue(  {
        el:'#app',
        render: (h) => h(App)
   });
复制代码


App.vue

复制代码
 <!--

 -->

<template>
  <div>
    <hr/>
    <div class="divCss">
        <h1 class="h1Css">Vue中的scoped控制组件的Css样式为局部样式</h1>
        <span style="color:white;font-size: 14px;padding: 20px;margin-left: 20px;"> App组件的css样式不允许进行 scoped进行局部样式控制。</span>
        <hr/>
        <!-- 调用组件，传递数据 -->
        <School/>
        <hr/>
        <Student />
        <hr/>

    </div>

  </div>
</template>
复制代码
复制代码
<script>

    import School from './components/School.vue';
    import Student from './components/Student.vue';


    export default {
        name:'App',
        components:{
            Student,
            School
        },
    }
</script>
复制代码
复制代码
<!--
  1：指定Css 样式的编写方式
  less 最大特点：内容可以嵌套着写

 -->
<style lang="less">
   .divCss{
        background-color: chocolate;
        margin: auto;
        padding: 20px;

        .h1Css{
        font-size: 36px;
        color: white;
   }
   }

</style>
复制代码

Student.vue

复制代码
<!--
 ## scoped样式

1. 作用：让样式在局部生效，防止冲突。
2. 写法：```<style scoped>```
 -->
<template>
    <div  class="ClassStyle">
      <h1  style="color:red">{{msg}}</h1>
      <h2>学生名称：{{name}}</h2>
      <h2>学生性别：{{sex}}</h2>
      <br/>
    </div>
</template>
复制代码
复制代码
  <script>
      export default {
        name:'Student',
        data () {
          return {
            msg:'学生信息',
            name:'向北',
            sex:'男'
          }
        },

      }
  </script>
复制代码
 <!--scoped 控制组件的Css样式为局部样式，不会为同名的cs样式名的冲突导致样式覆盖  -->
 <style  scoped>
    .ClassStyle{
      background-color:lightskyblue;
    }
  </style>

School.vue

复制代码
<!--
  ## scoped样式

  1. 作用：让样式在局部生效，防止冲突。
  2. 写法：```<style scoped>```
 -->
<template>
    <div  class="ClassStyle">
      <h1  style="color:red">{{msg}}</h1>
      <h2>学校名称：{{name }}</h2>
      <h2>学校地址：{{address}}</h2>
    </div>
</template>
复制代码
复制代码
  <script>
      export default {
        name:'School',
        data () {
          return {
            msg:'学校信息',
            name:'华南师范大学',
            address:'广州市天河区中山大道西55号'
          }
        },

      }
  </script>
复制代码
  <!--scoped 控制组件的Css样式为局部样式，不会为同名的cs样式名的冲突导致样式覆盖  -->
  <style  scoped>
    .ClassStyle{
      background-color: aquamarine;
    }
  </style>










4:页面效果图


image








posted @   一品堂.技术学习笔记  阅读(1471)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛

目录导航