vue中改变v-html中包含body标签的样式修改方法

奋斗的小鸟鸟

已于 2024-03-20 11:30:24 修改

阅读量1.2k

点赞数 12

分类专栏： vue-cli 文章标签： vue.js html javascript

于 2024-01-18 10:32:14 首次发布

本文链接：https://blog.csdn.net/qq_34953053/article/details/135667733

版权

vue-cli 专栏收录该内容

45 篇文章 1 订阅

订阅专栏

vue-改变body的css样式

beforeCreate() {
    document.querySelector('body').setAttribute('style', 'background-color:#f4f4f4; color:#666666;')
    },
beforeDestroy() {
    document.body.removeAttribute('style')
    },

在方法里加这个 document.querySelector('body').setAttribute('style', 'background-color:#f4f4f4; color:#666666;')就可以改变body里的样式。

如果是改变v-html中其他的样式就用::v-deep可以改变

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

奋斗的小鸟鸟

关注关注

12
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue中改变v-html中包含body标签的样式修改方法

就可以改变body里的样式。
复制链接

扫一扫

专栏目录

vue 修改模板{{}}标签_vue中自定义html文件的模板

weixin_39722070的博客

12-19

304

如果默认生成的 HTML 文件不适合需求，可以创建/使用自定义模板。一是通过 inject 选项，然后传递给定制的 HTML 文件。html-webpack-plugin 将会自动注入所有需要的 CSS, js, manifest 和 favicon 文件到标记中。plugins: [new HtmlWebpackPlugin({title: 'Custom template',template:...

vue通过v-html指令渲染的富文本无法修改样式的解决方案

10-15

主要介绍了vue通过v-html指令渲染的富文本无法修改样式的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

参与评论您还未登录，请先登录后发表或查看评论

Vue 设置v-html中元素样式

gdgztt的专栏

11-19

1402

Vue 设置v-html中元素样式

修改v-html内样式渲染

热门推荐

大把小米的博客

06-10

1万+

在vue项目中，有时候会需要给单独的页面中的body设置样式，下面是两种方法 1.在beforeCreate()中给body添加属性 beforeCreate() { document.querySelector('body').setAttribute('style', 'background-color:#fffcf5;') }, 2.给最外层的div添加个类名，然后处理 <template> <div class="body-bg

vue改变标签属性_如何在vue中修改动态标签中的样式和修改组件库样式

weixin_39731107的博客

12-21

1148

用HttpSessionListener与HttpSessionBindingListener实现在线人数统计在线人数统计方面的实现,最初我的想法是,管理session,如果session销毁了就减少,如果登陆用户了就新增一个,但是如果是用户非法退出,如:未注销,关闭浏览器等,这个用户的session是管理不 ...Chrome 开发工具 Javascript 调试技巧http://www.w3c...

零基础学习Vue:第15课 Vue的v-bind指令使用与设置及改变标签样式

舜岳的博客

04-16

323

零基础学习Vue:第15课 Vue的v-bind指令使用与设置及改变标签样式： v-bind指令给标签绑定vue中定义的属性： v-bind 缩写 ":" 通过缩写 " : "给标签绑定class属性名称： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &lt...

vue组件中控制body样式

dfsp3300的博客

01-03

551

vue组件中控制body样式，例如控制body宽度添加滚动条

详解三种方式解决vue中v-html元素中标签样式

12-29

Vue为v-html中标签添加CSS样式 {{news.title}} {{news.datetime}} <button class=back @click=goBack()>返回列表</button> 当我们使用v-html渲染页面

单个vue页面设置body的样式

qq_29124867的博客

01-05

2123

2、在template的第一个div设置样式 <template> <div class="help_bg"> </div> </template> 3、设置help_bg的样式，这样背景就为蓝色了 .help_bg{background: #149CFE;position: absolute; height: 100%; width: 100%;

vue 在 mounted 中通过 js 修改html、body节点的样式，设置背景图片

UserGuan的博客

11-29

2813

1、在 App.vue 中加入 body 样式，并修改默认样式（使背景图片四周不留空白） 2、在需要背景图的页面里加入样式 3、在原有代码中的 div 外再套一层 div 并引入第二步的样式

Vue 单独页面设置 body 样式

weixin_44590591的博客

01-07

6357

需求：针对不同的页面，的样式需要做一些变化。比如不同页面设置不同的背景色，如果直接在页面里设置 body 的样式，页面并不会生效，如下： <template> <div>单独页面</div> </template> <style> body { backgroud-color: #ccc; min-width:400px; } </style> 解决方法 <template> <

vue在个组件中给body加样式，或者给父级组件元素加样式

S筱潇S四维Smile

03-13

6519

在h5项目中，经常遇到不同组件需要不同背景色，通过vue的生命周期来解决。这组件创建前设置我的样式，销毁之前移除我设置的样式。用以下方式给body添加样式： <script> export default { beforeCreate: function() { document.getElementsByTagName("body")[0].class...

Vue对单独的页面的body样式设置

weixin_43484014的博客

01-18

2397

由于需要对登录界面的body样式进行设置在首页直接设置body{}实现不了需要像这样设置： export default { beforeCreate: function() { document.getElementsByTagName('body')[0].className = 'body-bg' } } <style lang="scss"> .body-bg { background-attachment: fixed; overflow: hidden;

如何给vue-cli项目中的body添加样式，从而达到改变背景颜色的效果

蚂蚁的博客

05-20

3256

Vue3去除body默认样式，去除白边

2301_80272947的博客

04-18

609

在项目src目录下新建styles文件夹，在styles下新建reset.scss 的文件将下面的代码复制进去。然后在项目根目录找到index.html，在里面添加代码。在进行Vue3搭建时，默认样式会出现白边。

vue v-html字体大小修改,详解三种方式解决vue中v-html元素中标签样式

05-19

在 Vue 中使用 v-html 指令渲染 HTML 代码时，如果想要修改其中的字体大小，可以采用以下三种方式： 1. 使用内联样式在 v-html 指令所绑定的元素上添加 style 属性，然后通过内联样式来修改字体大小。例如： ```html <div v-html="htmlStr" style="font-size: 14px;"></div> ``` 这种方式的缺点是不够灵活，无法在外部 CSS 文件中统一控制样式。 2. 使用 CSS 类名在外部 CSS 文件中定义一个类名，然后在 v-html 指令所绑定的元素上添加该类名即可。例如： ```html  <style> .html-content { font-size: 14px; } </style>  <div v-html="htmlStr" class="html-content"></div> ``` 这种方式更加灵活，可以在外部 CSS 文件中统一管理样式，但是需要注意 CSS 类名的命名不能重复。 3. 使用 scoped CSS 在 Vue 的单文件组件中，可以使用 scoped CSS 的方式来限定样式的作用范围，从而避免样式冲突。例如： ```html <template> <div> <div v-html="htmlStr" class="html-content"></div> </div> </template> <style scoped> .html-content { font-size: 14px; } </style> ``` 这种方式既灵活又安全，适用于 Vue 单文件组件中。但是需要注意，scoped CSS 的作用域是通过给元素添加特殊的属性选择器实现的，因此在一些特殊情况下可能会出现样式失效的问题。