首页静态页面里使用vue.component 中设置style不生效

静态页面里使用vue.component 中设置style不生效

时间: 2023-12-13 12:04:46 浏览: 76

如果您在静态页面中使用 Vue 组件，需要确保您已经正确引入了 Vue 库，并且在组件中使用了 `scoped` 属性。此外，还需要注意以下几点： 1. 静态页面中需要手动挂载组件在静态页面中，需要手动挂载组件。可以使用 `new Vue()` 来创建 Vue 实例，并将组件挂载到实例中。例如： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Static Page</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <my-component></my-component> </div> <script> Vue.component('my-component', { template: '<div class="my-component">Hello, World!</div>', // 增加 scoped 属性 scoped: true, // 增加样式 style: ` .my-component { background-color: red; } ` }) new Vue({ el: '#app' }) </script> </body> </html> ``` 2. 样式选择器需要加上组件前缀如果您在组件中使用了 `scoped` 属性，需要注意样式选择器需要加上组件前缀。例如： ```html <template> <div class="my-component">  </div> </template> <script> export default { name: 'MyComponent' } </script> <style scoped> /* 注意这里的选择器加上了组件前缀 */ .my-component { /* 这里的样式只会在 MyComponent 内部生效 */ background-color: red; } </style> ``` 希望以上解答能够帮助您。

阅读全文