在vue.js组件中,如何在css中使用道具?
问题描述:
我是vue.js的新手。这里是我的问题:在vue.js组件中,如何在css中使用道具?
在* .vue文件是这样的:
<template>
<div id="a">
</div>
</template>
<script>
export default {
name: 'SquareButton',
props: ['color']
}
</script>
<style scoped>
#a {
background-color: ?
}
<style>
我如何使用道具background-color:
color
(其中一个是现在?
)。
谢谢。
答
你不知道。您可以使用一个计算性能而使用道具返回div的风格,就像这样:
<template>
<div id="a" :style="style" @mouseover="mouseOver()">
</div>
</template>
<script>
export default {
name: 'SquareButton',
props: ['color'],
computed: {
style() {
return 'background-color: ' + this.hovering ? this.color: 'red';
}
},
data() {
return {
hovering: false
}
},
methods: {
mouseOver() {
this.hovering = !this.hovering
}
}
}
</script>
<style scoped>
<style>
感谢您的answer.If我想用CSS伪类,如':hover',又该我做 ?谢谢。 – MingWen
您可以使用mouseover事件触发数据更改,并在样式计算属性中使用该数据属性。我编辑了这个例子,这样你就可以看到一个例子(虽然它没有经过测试,所以也许有一些可以解决的问题,但我认为你可以明白) – Potray
好的例子,谢谢。 – simhumileco