vue v-for动态渲染元素有的元素带书名号 有的不带怎么实现所有元素左对齐

使用JavaScript动态调整样式：如果书名号的宽度不固定，可以使用JavaScript来动态计算并调整样式。

// 假设items是一个包含文本的数组
data() {
  return {
    items: [
      { text: '书名号《示例》' },
      { text: '没有书名号的文本' }
    ]
  };
},
methods: {
  adjustTextAlign(text) {
    if (!text.includes('《')) {
      // 动态添加样式
      return { 'padding-left': '20px' }; // 根据需要调整
    }
  }
}

然后在Vue模板中使用v-bind绑定样式：

<div v-for="item in items" :key="item.id" :style="adjustTextAlign(item.text)">
  {{ item.text }}
</div>