020.Vue3入门,sytle中加入scoped只在这个文件中生效
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、效果如下: