vue使用 ::after ::before 伪元素动态改变content内容

最新推荐文章于 2025-09-24 13:11:02 发布

原创最新推荐文章于 2025-09-24 13:11:02 发布 · 8.2k 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#html #vue.js

vue 专栏收录该内容

10 篇文章

订阅专栏

这篇文章探讨了如何使用Vue.js进行动态内容更新，包括组件化开发和数据绑定，适合前端开发者深入理解现代前端框架。

<!--  div标签中添加 :data-attr，里边的内容指向 content -->
<div :data-attr="content"></div>


export default {
    data() {
        return {
            // 可以修改的内容
            content:'动态的内容'
        }
    }
}

<style>

// 使用attr 绑定对应的data-attr ，获取其中的值
.ttest::before {
    
    content: attr(data-attr);
}
</style>