020.Vue3入門，sytle中加入scoped只在這個檔案中生效

像一棵海草海草海草發表於2024-08-10
Vue

1、全域性程式碼App.vue如下

<script setup>
import Testpage001 from './view/Testpage001.vue'
import Testpage002 from './view/Testpage002.vue'
</script>

<template>
  <div class="style1">測試1</div>
  <Testpage001/>
  <Testpage002/>
</template>

<style>
.style1 {
  color: red;
  font-size: 30px;
}
</style>

2、Testpage001程式碼如下

<template>
  <div class="style1">測試1</div>
</template>

<script>
</script>

3、Testpage002程式碼如下

<template>
  <div v-bind:class="testCls">測試2</div>
</template>

<script>
export default {
  data() {
    return {
      testCls: "style1",
    }
  }
}
</script>

<style scoped>
.style1 {
  color: blue;
  font-size: 30px;
}
</style>

4、效果如下：

相關文章