这是我参与「第四届青训营 」笔记创作活动的第6天.

背景:

在青训营中我们组的仿掘金官网项目经大家商量后决定用vue去写,在写文章详情页的点赞UI的时候发现掘金的点赞的数值是after伪类选择器加上的.

然后在自己尝试过程中发现:

<template>
<div class="afterdome">
<div class="case1" :style="{ '--color': color, '--name': name }">凶手是</div>
</div>
</template>

<script>
export default {
name: 'Case',
data() {
return {
name: "小明",
color: "red",
}
},
}
</script>

<style>
.case1 {
color: var(--color);

}

.case1::after {
content: var(--name);
/* content: "小明"; */
color: black;
}
</style>

其中变量name并没有生效. 在网上搜索后发现了这几种方法特意总结一下.

解决方法:

方法一:

直接在style里设置变量.

 
<style  lang="scss" scopd>
$name:'小蜜';
.case1 {
    color: var(--color);
 
}
 
.case1::after {
    content: $name;
    /* content: "小明"; */
    color: black;
}
</style>

方法二:

直接在标签中创建新属性,讲属性值和data里的变量绑定.然后使用attr()获取属性值.

 
<!--  div标签中添加 :data-attr，里边的内容指向 content -->
<div class="test" :data-attr="content"></div>
 
 
export default {
    data() {
        return {
            // 可以修改的内容
            content:'动态的内容'
        }
    }
}
 
<style>
 
// 使用attr 绑定对应的data-attr ，获取其中的值
.test::before {
    
    content: attr(data-attr);
}
</style>
 

方法三:

因为要传递的数据是字符串,所以直接在其值的两侧加单引号即可.

<template>
    <div class="afterdome">
        <div class="case1"  :style="{ '--color': color ,'--name':name}">凶手是</div>
    </div>
</template>

<script>
export default {
    name: 'Case',
    data() {
        return {
            name: "'小明'",
            color: "red",
        }
    },
}
</script>

<style>
.case1 {
    color: var(--color);

}

.case1::after {
    /* content: attr(data-attr); */
    content: var(--name);
    color: black;
}
</style>

方法四:

虽然content属性本身不支持变量，但是counter-reset属性后面的计数器初始值是支持的，于是我们可以来一招移花接木让CSS var变量值作为字符在页面中显示。此方法可用于变量是数字时去写进度条.

/* 有效 */
.bar::after {
    counter-reset: progress var(--percent);
    content: counter(progress);
}