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

您可以这样操作：

<b-button :variant="foo" @click="dataName = !dataName">Button Name</b-button>

//...

<script>
export default {
    name: 'componentName',
    data() {
        return {                       
            dataName: true //<--- define data
        }
    },
computed: {
    foo() {
      return this.dataName ? "success" : "warning"; //<--- define condition/s
    }
}
...

Answer 2

您需要像这样将alertvariant属性绑定到variant属性：

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

注意:variant是v-bind:variant的快捷方式

有关数据绑定here

的更多信息

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

2 个答案: