在vue中 我想用::after伪类选择器给文本后边加一个动态的信息.

Question

在vue中 我想用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>

Answer 1

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

<!--  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>

你定义的name并没有生效，上面两种是可以的