scoped样式

最新推荐文章于 2023-12-22 09:21:29 发布

qq_26326471

最新推荐文章于 2023-12-22 09:21:29 发布

阅读量92

点赞数

分类专栏：学习文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_26326471/article/details/127543747

版权

学习专栏收录该内容

26 篇文章 0 订阅

订阅专栏

  <template>
    <div>
      <Student/><hr>
      <MySchool></MySchool>
      <hr/>
    </div>

    scoped样式
    作用: 让样式在局部生效,防止冲突
    写法<!-- :<style scoped> -->
  </template>
  
  <script>
  // 引入school组件
import Student from './components/Student.vue'
import MySchool from './components/School.vue'
  export default {
    name: 'App',
    components: {
        Student,
        MySchool
    },
    data() {
      return {
      }
    },
    methods :{
    },
  
  }
  </script>
  
  <style >
  .title{
    color: rgb(152, 25, 25);
  }
  </style>

 --------------------------------------------------------------------------------------

<template>
  <div class="demo">
    <h2 class="title">学校名称:{{name}}</h2>
    <h2>学校地址:{{ address }}</h2>
  </div>
</template>

<script>
export default {
    name:'MySchool',
     props: {
    },
    data() {
        return {
            name:'越焦虑越无从下手',
            address:'大连',
        }
    },
    methods:{
     
    }

}
</script>

<style scoped>
.demo {
  background-color: skyblue;
}

</style>

---------------------------------------------------------------------------------------

<template>
  <div class="demo">
    <h2 class="title">学生姓名:{{name}}</h2>
    <h2>学生性别:{{sex}}</h2>
  </div>
</template>

<script>
export default {
    name:'MyStudent',
     props: {
    },
    data() {
        return {
            name:'张三',
            sex:'男',
        }
    },
    methods:{
      
    }

}
</script>

<style scoped>
.demo {
  background-color: pink;
}

</style>