如何将prop thrID的值添加为模板中的类值?
thrID作为 my1value
传入<template>
<div v-bind:class="['hhhhh',thrID]">
test {{thrID}}
</div>
</template>
<script>
export default {
name: 'bottom',
components: {
},
props:["thrID"]
}
</script>
<style scoped>
.bottom {
background: yellow;
height: 30px;
width: 100%;
}
</style>
它呈现
<div data-v-10e356bb="" data-v-7ba5bd90="" class="hhhhh">
test my1value
</div>
我希望它具有这样的课程
<div data-v-10e356bb="" data-v-7ba5bd90="" class="hhhhh my1value">
test my1value
</div>
答案 0 :(得分:1)
通过将字符串,数组或对象绑定到class属性,可以轻松添加自定义类。首先,使用v-bind
或:
语法将变量绑定到class
属性:
<template>
<div :class="classes">
<!-- Magic! -->
</div>
</template>
然后,在我们的导出组件中,我们可以做几件事。最通用的选项是使用对象。如果键的值是true,则应用该类。如果该值是伪造的,则不会应用。我们使用[ keyName ]: value
语法将this.thrID
添加为对象的键。
export default {
props: {
thrID: {
type: String,
required: true
}
},
computed: {
classes () {
return {
hhhhh: true,
[this.thrID]: true
}
}
}
}
类似地,您可以返回一个数组:
classes () {
return [
'hhhhh',
this.thrID
]
}
或者您可以使用类创建一些字符串:
classes () {
return `hhhhh {$this.thrID}`
}