Javascript 如何使用Vue.js显示和隐藏引导微调器？ ... ...

我想在单击按钮时在按钮上显示微调器

当api返回结果时，弹出模式并同时隐藏微调器

---

用jQuery实现起来似乎相对容易，作为vue.js的初学者，我在编写这段代码时不知所措。这允许您绑定到变量并控制标记是否可见。如果变量为truthy，则显示元素；如果变量为falsy，则隐藏元素。你可以了解更多关于

因此，在您的按钮中，我们需要创建一个标记来包装按钮文本。在这种情况下，我们将使用

。然后，我们将使用纯引导创建一个微调器：

加载。。。

现在我们创建您的按钮

按钮文本
加载。。。

接下来在代码中，您需要创建一个加载变量

data（）{
返回{
...
加载：false，
...
}
}

然后，在处理请求时，需要控制加载变量

方法：{
API（）{
这是。加载=真；
get（“/test”）。然后（{res}）=>{
这个。加载=假；
}).catch（（错误）=>{
console.log（错误）；
这个。加载=假；
});
}
}

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" v-on:click="api">
  ...
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  ...
</div>