使用这个 div 声明:
<div v-bind:class="[currentPage === 'help' ? highlight : '']">
我相应地构建:https://v2.vuejs.org/v2/guide/class-and-style.html#Array-Syntax
但是绑定(bind)不起作用(无论 currentPage
值如何,“突出显示”类都不会应用)。
我有这个模型,其中有 currentPage
变量跟踪事件页面:
var vueApp = new Vue({
el: '#vueApp',
data: {
currentPage: 'help',
如何根据 vue 属性的字符串值激活元素上类的绑定(bind)?
最佳答案
在模板中:
<div v-bind:class="[currentPage === 'help' ? highlight : '']">
highlight
是一个标识符。
因此,这样的表达式期望 highlight
是 Vue 实例/组件的属性。它正在被评估,但由于它可能是空的(未定义
),所以你什么也得不到。
既然您想要字符串,请执行以下操作:
<div v-bind:class="[currentPage === 'help' ? 'highlight' : '']">
演示:
new Vue({
el: '#vueApp',
data: {
currentPage: 'help',
}
})
.highlight { background-color: yellow }
<script src="https://unpkg.com/vue"></script>
<div id="vueApp">
<div v-bind:class="[currentPage === 'help' ? 'highlight' : '']">Hello</div>
</div>
关于javascript - Vue.js 根据条件绑定(bind)到类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49481913/