vue.js bootstrap-vue动态更改警报变体

Question

所以我在vue.js项目中使用bootstrap-vue，这是您可以根据文档显示警报的方式：

<b-alert variant="success" show>Success Alert</b-alert>

我想做的是

<b-alert variant=alertvariant show>Success Alert</b-alert>

//...

<script>
export default {
    name: 'SetPOS',
    data() {
        return {                       
            alertvariant: "warning"
        }
    },
...

但这是行不通的，警报显示出没有样式。有什么方法可以在警报的variant属性中使用变量，以便可以从代码中动态更改它？

Answer 1

您需要像下面这样将alertvariantprop 绑定到variant属性：

<b-alert :variant="alertvariant" show>Success Alert</b-alert>

注意:variant是v-bind:variant

有关数据绑定的更多信息，请点击此处