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

您需要将alertvariant属性绑定到variant属性，如下所示：

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

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

有关数据绑定here的更多信息

Answer 2

你可以这样做：

<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
    }
}
...