CSS
中使用 data
中定义的数据CSS
中设置数据展示, 但是 CSS
中如何获取到后端传来的数据呢?data-
通过 v-bind
将后端的数据绑定在自定义 HTML
属性上, 然后通过 CSS
的 attr()
函数获取该属性
<template>
<div>
<div class="box"
:data-content="obj.desc"
:data-percent="obj.percent">div>
div>
template>
<script>
export default {
name: 'Student',
data() {
return {
obj: {
percent: '30%',
desc: '哈哈哈哈哈哈'
}
}
},
methods: {
},
}
script>
<style>
.box {
width: 400px;
height: 200px;
border: 1px solid salmon;
position: relative;
}
.box::before, .box::after {
position: absolute;
top: 0; bottom: 0;
}
.box::before {
content: attr(data-content);
left: 0;
right: calc(100% - attr(data-percent));
background-color: deepskyblue;
}
.box::after {
content: attr(data-content);
right: 0;
left: attr(data-percent);
background-color: deeppink;
}
style>
最后页面展示
计算 right
部分失效了, 原因是 attr()
函数不能在 calc()
中使用! 怎么办呢?
CSS
变量
通过在 HTML
的 style
属性以 v-bind
的形式绑定定义的 CSS
变量, 继而在 CSS
中使用该变量达到效果
<template>
<div>
<div class="box"
:style="{'--percent': obj.percent}"
:data-content="obj.desc"
:data-percent="obj.percent">div>
div>
template>
<style>
.box {
width: 400px;
height: 200px;
border: 1px solid salmon;
position: relative;
}
.box::before, .box::after {
position: absolute;
top: 0; bottom: 0;
}
.box::before {
content: attr(data-content);
left: 0;
/* right: calc(100% - attr(data-percent)); */
right: calc(100% - var(--percent));
background-color: deepskyblue;
}
.box::after {
content: attr(data-content);
right: 0;
/* left: attr(data-percent); */
left: var(--percent);
background-color: deeppink;
}
style>
上面的代码省略了 标签部分, 因为这部分没有改动
当当当当! 成功!