在 vue.js 组件中，如何在 css 中使用 props? [英] In vue.js component, how to use props in css?
本文介绍了在 vue.js 组件中，如何在 css 中使用 props?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是 vue.js 的新手.这是我的问题:
在这样的 *.vue 文件中:
<div id="a"><脚本>导出默认{name: '方形按钮',道具:['颜色']}<样式范围>#一种 {背景颜色: ?}<风格>
我如何使用 background-color: 中的道具 color( 现在在哪里?).
谢谢.
解决方案
你没有.您使用计算属性，然后使用道具返回 div 的样式，如下所示:
<div id="a" :style="style" @mouseover="mouseOver()"><脚本>导出默认{name: '方形按钮',道具:['颜色']，计算:{风格 () {返回 'background-color:' + this.hovering ?this.color: '红色';}},数据 () {返回 {悬停:假}},方法: {鼠标移到 () {this.hovering = !this.hovering}}}<样式范围><风格>
I'm new to vue.js. Here is my problem:
In a *.vue file like this:
<template>
<div id="a">
</div>
</template>
<script>
export default {
name: 'SquareButton',
props: ['color']
}
</script>
<style scoped>
#a {
background-color: ?
}
<style>
How can I use the props color in background-color: (where is a ? now).
Thanks.
解决方案
You don't. You use a computed property and there you use the prop to return the style of the div, like this:
<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>
这篇关于在 vue.js 组件中，如何在 css 中使用 props?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
