[英]How to use JSON data in Scoped area of VUE Component
我想在 VUE 组件的 Scoped 区域中使用我的 JSON 数据。
所以基本上我的 Json 文件包含 CSS 样式作为文本和 HTML 标签。
我在 Vue 组件中使用 v-html 获得了 HTML 值。
但现在我想从 VUE 组件的 CSS 作用域区域中的 JSON 文件访问 CSS 值。
我的 JSON
{
"elements":[
{
"id":"11",
"html":"<button>this is button</button>",
"css":"button{color:#f00;}",
"author":"Test"
}
]
}
======================
我的 VUE 组件
<template>
<div class="collection">
<section class="section section-elements">
<div class="container container--large">
<div class="row">
<div class="col-sm-3" v-for="(item, index) in json.elements" v-bind:key="index">
<div class="elements">
<div class="elements-head" v-html="item.html" :style="item.css">
</div>
<div class="elements-main">
<p>{{ item.css }}</p>
</div>
<div class="elements-foot">
<p>{{ item.author }}</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
动态创建作用域 css 样式是不可能的,因为这些样式是在构建期间由 vue-router 制作的,而不是在客户端中制作的。
但是,如果您想将样式应用于<div>
元素,则您当前的代码应该可以工作,只需将样式包含在大括号中:
{
"id":"11",
"html":"<button>this is button</button>",
"style":"font-size:18vw;color:#f00;",
"author":"Test"
}
<div class="elements-head" v-html="item.html" :style="item.style">
示例: https : //jsfiddle.net/ellisdod/q3L5ahke/
但是,如果您想对元素应用样式,最好使用动态组件。 这样做的缺点是您需要将所有 html 脚本注册为组件 - 您可以编写一个循环来从 json 以编程方式执行此操作。
Vue.component('MyButton',{
template:'<button>this is button</button>'
})
{
"id":"11",
"component":"MyButton",
"style":"font-size:18vw;color:#f00;",
"author":"Test"
}
<component :is="item.component" :style="item.style">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.