私は vue.js を初めて使います。問題は次のとおりです:
*.vue ファイルでは次のようになります:
<template>
<div id="a">
</div>
</template>
<script>
export default {
name: 'SquareButton',
props: ['color']
}
</script>
<style scoped>
#a {
background-color: ?
}
<style>
(現在地は)の小道具をどのようcolorに使用すればよいですか。background-color:?
ありがとう。
ベストアンサー1
本当にできますよ！
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://github.com/vuejs/vue/issues/7346