vue js 动态生成带样式的div，填入自己想要的数据

可以使用Vue的动态绑定特性，以及计算属性来实现动态生成带样式的div，并填入所需的数据。例如：

HTML代码：

<div id="app">
  <div v-for="item in items" :style="{background: item.color}" class="box">
    {{item.text}}
  </div>
</div>

Vue实例代码：

new Vue({
  el: '#app',
  data: {
    items: [
      {color: 'red', text: '红色的div'},
      {color: 'blue', text: '蓝色的div'},
      {color: 'green', text: '绿色的div'}
    ]
  },
  computed: {
    addStyles() {
      let styles = '';
      this.items.forEach(item => {
        styles += `
          .box[style*="background: ${item.color}"]::before {
            content: '${item.text}';
            position: absolute;
          }
        `;
      });
      return styles;
    }
  },
  mounted() {
    var style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = this.addStyles;
    document.head.appendChild(style)
  }
});

这样就可以动态生成带不同样式的div，并填入所需数据，通过计算属性来动态生成CSS样式，并通过mounted生命周期钩子将样式添加到head中。