我是 vue.js 新手。这是我的问题：
在 *.vue 文件中，如下所示：
<template>
<div id="a">
</div>
</template>
<script>
export default {
name: 'SquareButton',
props: ['color']
}
</script>
<style scoped>
#a {
background-color: ?
}
<style>
我该如何使用道具color in background-color:（其中有一个? now).
Thanks.
你其实可以！
您应该在计算属性中定义 CSS 变量，然后将计算属性作为样式属性调用到需要 CSS 变量的元素，最后您可以在文档底部的标签中使用该变量。
new Vue({
el: '#app',
data: function() {
return {
baseFontSize: 1,
bgHoverColor: "#00cc00",
hoverContent: "Hovering!"
}
},
computed: {
cssProps() {
return {
'--hover-font-size': (this.baseFontSize * 2) + "em",
'--bg-hover-color': this.bgHoverColor,
'--hover-content': JSON.stringify(this.hoverContent)
}
}
}
})
div {
margin: 1em;
}
div.test:hover {
background-color: var(--bg-hover-color);
font-size: var(--hover-font-size);
}
div.test:hover::after {
margin-left: 1em;
content: var(--hover-content);
}
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app" :style="cssProps">
<div>Hover text: <input type="text" v-model="hoverContent"></div>
<div>Hover color: <input type="color" v-model="bgHoverColor"></div>
<div class="test">Hover over me</div>
</div>
或者看看这里：https://codepen.io/richardtallent/pen/yvpERW/ https://codepen.io/richardtallent/pen/yvpERW/
和这里：https://github.com/vuejs/vue/issues/7346 https://github.com/vuejs/vue/issues/7346
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
