vue实现店铺装修h5用户端实现

获取数据之后就可以动态渲染页面了

app.vue

<template>
  <div id="app">
    <button @click="getdata">获取数据</button>
    <component :is="item.name" :enterprise="item.style" v-for="(item,index) in list" :key="index"></component>
  </div>
</template>
<script>
import hack from "./views/hack";
import Home from "./views/Home";
export default {
  name: "app",
  data() {
    return {
      list: []
    };
  },
  methods: {
    getdata() {
      setTimeout(() => {
        this.list = [
          { name: "hack", style: "background:red;color:white" },
          { name: "Home", style: "background:yellow;color:blue" }
        ];
      }, 1000);
    }
  },
  components: {
    hack,
    Home
  }
};
</script>

hack.vue

<template>
  <div class="hack">
    <div :style="enterprise">hack</div>
  </div>
</template>

<script>
export default {
  name: 'hack',
  props:['enterprise'],
}
</script>

Home.vue

<template>
  <div :style="enterprise">home</div>
</template>

<script>
export default {
  name: "home",
  props: ["enterprise"], 
};
</script>