vue中如何使用定义好的变量设置css样式

发布时间:2022-03-05 14:04:49 作者:小新
阅读:696
Vue开发者专用服务器,限时0元免费领! 查看>>

小编给大家分享一下vue中如何使用定义好的变量设置css样式,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

前言

在做项目的时候,通常会遇到需要在 HTML 标签上绑定变量来设置样式,对于这种需求,共有两种情况。

实现

第一种情况

如果是对于代码中实实在在存在的 HTML 标签,我们可以直接绑定变量来设置样式,比如改变表格的边框。

<template>
  <div class="app-container">
    <template>
      <el-table
        :data="tableData"
        :
      >
        <el-table-column
          prop="date"
          label="日期"
          width="180"
        />
        <el-table-column
          prop="name"
          label="姓名"
          width="180"
        />
        <el-table-column
          prop="address"
          label="地址"
        />
      </el-table>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 表格数据
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      table_border: 'border: 1px solid red'// 设置表格边框样式
    }
  }
}
</script>

效果如下:

vue中如何使用定义好的变量设置css样式

第二种情况

如果我想手动改变表格表头的边框颜色,有时候由于一些 UI 框架的组件是封装好的,实际的 HTML 标签代码中并不能直接设置,这时候就需要在 css 中进行设置,那么怎么在 css 中使用变量呢。

 语法

首先,我们要搞明白在 css 中如何声明一个 css 变量,如下:

--color: red

如何使用该 css 变量,如下:

.className{
    color: var(--color)
}
方法一

基于以上语法,我们来实现设置表格表头的边框,如下:

<template>
  <div class="app-container">
    <template>
      <el-table
        :data="tableData"
        :
      >
        <el-table-column
          prop="date"
          label="日期"
          width="180"
        />
        <el-table-column
          prop="name"
          label="姓名"
          width="180"
        />
        <el-table-column
          prop="address"
          label="地址"
        />
      </el-table>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 表格数据
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],

      table_border: '1px solid red', // 设置表格边框样式
      table_header_border: '3px solid green'// 设置表头边框样式
    }
  },
  computed: {
    setStyles() {
      return {
        '--tableBorder': this.table_border,
        '--tableHeaderBorder': this.table_header_border
      }
    }
  }
}
</script>
<style lang="scss">
  .el-table--fit{
    border: var(--tableBorder);
  }
  .el-table__header-wrapper{
    border: var(--tableHeaderBorder);
  }
</style>

效果如下:

vue中如何使用定义好的变量设置css样式

方法二

对于第二种情况,除了以上方法以外,我们还可以在 HTML 标签上使用 ref 属性来实现,如下:

<template>
  <div class="app-container">
    <template>
      <el-table
        ref="tableStyle"
        :data="tableData"
      >
        <el-table-column
          prop="date"
          label="日期"
          width="180"
        />
        <el-table-column
          prop="name"
          label="姓名"
          width="180"
        />
        <el-table-column
          prop="address"
          label="地址"
        />
      </el-table>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 表格数据
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],

      table_border: '1px solid red', // 设置表格边框样式
      table_header_border: '3px solid green'// 设置表头边框样式
    }
  },
  mounted() {
    this.setStyles()
  },
  methods: {
    setStyles() {
      this.$nextTick(() => {
        this.$refs.tableStyle.$el.style.setProperty('--tableBorder', this.table_border) // 给变量赋值
        this.$refs.tableStyle.$el.style.setProperty('--tableHeaderBorder', this.table_header_border) // 给变量赋值
      })
    }
  }
}
</script>
<style lang="scss">
  .el-table--fit{
    border: var(--tableBorder);
  }
  .el-table__header-wrapper{
    border: var(--tableHeaderBorder);
  }
</style>

效果如下:

vue中如何使用定义好的变量设置css样式

看完了这篇文章,相信你对“vue中如何使用定义好的变量设置css样式”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

推荐阅读:
  1. vue中怎么设置全局变量或数据
  2. VUE如何定义全局变量

开发者交流群:

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue css

上一篇:Python如何实现PDF扫描件生成DOCX或EXCEL功能

下一篇:Entity Framework如何使用Code First模式管理数据库

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
开发者交流群×