src_scoped样式

# 代码

# `代码路径`

$ tree -N
.
├── App.vue
├── components
│   ├── School.vue
│   └── Student.vue
└── main.js

1
2
3
4
5
6
7

# `App.vue`

<template>
  <div>
    <School/>
    <hr>
    <Student/>
  </div>
</template>

<script>
    import School from './components/School.vue'
    import Student from './components/Student.vue'
    export default {
        name:'App',
        components:{School,Student},
    }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# `School.vue`

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

<script>
    export default {
        name:'School',
        data() {
            return {
              name:'shangguigua',
              address:'beijing'
            }
        },
    }
</script>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# `Student.vue`

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

<script>
    export default {
        name:'Student',
        data() {
            return {
              name:'eryajf',
              sex:'男'
            }
        },
    }
</script>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# `main.js`

import Vue from "vue"
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    el: '#app',
    components:{App},
    render: h => h(App)
});

1
2
3
4
5
6
7
8
9
10

# 笔记

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

上次更新: 2024/02/28, 13:00:35

← src_插件 src_TodoList案例→

src_scoped样式

# 代码

# 代码路径

# App.vue

# School.vue

# Student.vue

# main.js