vue 中的 v-bind 对伪元素无效

在Vue.js中，`v-bind`指令用于动态绑定元素的属性。然而，当试图通过`v-bind`对HTML的伪元素（比如`:before`, `:after`)进行数据绑定时，你会发现这是无效的，因为伪元素不是DOM元素，它们只是CSS选择器的一部分，并不直接对应于实际的DOM节点。

Vue不会自动将数据绑定到伪元素上，即使你尝试这样做：

<div v-bind:class="{ 'has-pseudo': condition }"> <!-- 这里 :class有效 -->
  <::before>{{ someData }}</::before> <!-- 这里的v-bind无效 -->
</div>

当你需要修改伪元素的内容时，通常的做法是利用JavaScript（例如使用`this.$el`或`this.$refs`来访问真实的DOM元素，然后手动操作其innerHTML或style属性）或者使用计算属性和条件渲染来控制内容：

data() {
  return {
    condition: true,
    pseudoContent: this.someData || ''
  }
},
methods: {
  updatePseudoElement() {
    if (this.condition) {
      this.$el::before(this.pseudoContent);
    } else {
      // 清除伪元素
      this.$el::before('');
    }
  }
}