[Vue]直接使用 v-bind 指令到 <style /> 标签内

2021-10-09 21:01:32 阅读：241 来源： 互联网

v-bind 绑定内联样式有三种，第一种是官方介绍的方式，第二种是利用 CSS var() 函数，第三种是直接在 CSS 中使用 v-bind()。

官方介绍的方式，在这里不过多赘述，请查看官方文档

如果我们要动态更改一个 p 标签的字体颜色，利用 CSS var() 函数是这样做到的：

<template>
  <div>
    <p v-bind:style="{ --color: fontColor }">Hello Vue.js!</p>
  </div
</template>

<script lang="js">
export default {
  data() {
    return {
      fontColor: 'red'
    }
  }
}
</script>

<style lang="css" scoped>
p {
  color: var(--color)
}
</style>

直接在 CSS 中使用 v-bind()，是这样做到的：

<template>
  <div>
    <p>Hello Vue.js!</p>
  </div
</template>

<script lang="js">
// ... JS 代码与上面的例子一样
</script>

<style lang="css" scoped>
p {
  color: v-bind(fontColor)
}
</style>

标签：Vue,color,bind,js,标签,var,CSS
来源： https://www.cnblogs.com/shiramashiro/p/15387577.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

[Vue]直接使用 v-bind 指令到 <style /> 标签内