vue 动态添加 <style> 样式 vue动态添加 绑定自定义字体样式


created(){
//动态添加自定义字体样式 let style = document.createElement('style'); style.type = "text/css"; style.innerText = "@font-face {font-family:'PingFang-Regular';src:url('http://diary-biku.oss-cn-qingdao.aliyuncs.com/upload_file/common/typeface/2557240976048193.ttf')}"; document.getElementsByTagName('head')[0].appendChild(style) }

只能想到用动态添加《style》标签的方式了 0.0.

转载于:https://www.cnblogs.com/Eeexiang/p/10231655.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
是的,您可以使用 Vue动态定语法来设置表格内的某个汉字的颜色。具体来说,您可以使用 `v-bind:class` 指令来定一个动态的 CSS 类名,然后在 CSS 中定义该类名的样式,以实现字体颜色的自定义。 以下是一个简单的示例,展示了如何在 Vue 中自定义表格内的某个汉字颜色: ```html <template> <div> <h2>{{ title }}</h2> <table> <thead> <tr> <th>考核项</th> <th>负责人</th> <th>事项</th> </tr> </thead> <tbody> <tr> <td>{{ abilityHealth }}</td> <td>{{ abilityGuaranteeTeam }}</td> <td>{{ abilityGuarantee }}</td> </tr> <tr> <td>{{ abilitySatisfaction }}</td> <td>{{ abilityOfficer }}</td> <td> {{ abilityDescription.slice(0, 4) }} <span :class="{ 'red-text': true }"> {{ abilityDescription.slice(4) }} </span> </td> </tr> </tbody> </table> </div> </template> <script> export default { name: 'App', data() { return { title: '能力考核', abilityHealth: '能力服务健康度', abilityGuaranteeTeam: '能力保障团队', abilityGuarantee: '保障上台能力的正常平稳运行', abilitySatisfaction: '能力使用满意度', abilityOfficer: '能力专员 运营团队', abilityDescription: '能力专员:解答能力使用者在咨询、对接和使用能力的过程问题并要求使用者进行满意度打分或使用中台能力配合能力提供方进行满意度打分 运营团队:省内能力通过自动化打分程序根据打分清单完成本省能力满意度自动打分,打分取值99-100分,并于每月打分之日起至月底监控低分情况(自动化低分监控程序待上线)。', } }, } </script> <style> .red-text { color: red; } </style> ``` 在上面的代码中,我们使用了 `:class` 定语法来动态设置 `span` 标签的 `class` 属性。我们定义了一个名为 `red-text` 的 CSS 类,用于设置字体颜色为红色。然后,我们将 `span` 标签的文本内容分为两部分,第一部分包含前 4 个汉字(即“能力专员”),第二部分包含后面的内容。我们使用 `slice` 方法来分割文本内容,然后将第二部分的文本内容用 `span` 标签包裹起来,并且为该 `span` 标签添加了 `red-text` 类名,以实现字体颜色的自定义。 希望这个示例能够帮助您实现自定义字体颜色的需求!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值