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/11/19, 23:11:42

← src_插件 src_TodoList案例→

src_scoped样式

# 代码

# 代码路径

# App.vue

# School.vue

# Student.vue

# main.js