Vue在CSS使用data的数据
庇耳拉海莱 人气:01、考虑一个问题, 后端传来一个数据, 比如是某个百分比, 需要在页面做进度展示. 一般的情况都会在 CSS 中设置数据展示, 但是 CSS 中如何获取到后端传来的数据呢?
2、使用自定义属性: 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 { data() { return { obj: { percent: '30%', desc: '哈哈哈哈哈哈' } } }, } </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>
最后页面展示
加载全部内容