如何获取 JSON 对象并放入 CSS答案

【问题标题】：How to get a JSON object and put in a CSS如何获取 JSON 对象并放入 CSS
【发布时间】：2021-10-17 01:31:44
【问题描述】：

我需要转换一个 JSON 对象以放入 CSS

我尝试使用 vue js 来实现，使用 v-for 制作地图图例并生成图例，但如果您知道一种方法而不是 make 作品获取 JSON 对象并将其放入如下样式的标签中：

   {
       "color" : "red",
       "background" : "yellow"
   }

<div style="JSON RIGHT HERE"></div>

非常感谢您的帮助！

【问题讨论】：

你的意思是如何从对象中获取属性并将它们转换为样式属性中的css（例如style="color: red; background: yellow"）？

标签： javascript html css json vue.js

【解决方案1】：

这有帮助吗：

Vue.component('some-component', {
  template: `
    <div>
      <div :style="someStyle"></div>
      <div>This is some component</div>
    </div>
  `,
  data() {
    return {
      someStyle: {
        width: '15em',
        height: '15em',
        'background-color': 'skyblue',
      },
    };
  },
});

来源：https://forum.vuejs.org/t/how-to-apply-an-inline-style-inside-a-component/12829/2

【讨论】：

【解决方案2】：

试试这个

Vue.component('MyElement',{
    template:'<div>This is my style</div>'
})

new Vue({
  el: '#app',
  data() {
    return {
      myStyle: {
        'width': '100%',
        'height': '100px',
         'padding': '10px',
        'background-color': 'lime',
      },
    };
  },
  template: `<component is="MyElement" :style="myStyle"/>`
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app"></div>

【讨论】：