Question

我正在使用 Vue2 （简单的webpack），我想在组件中添加 bootstrap 进度栏，该进度条显示在组件中，但是没有视觉上的进步（aria-valuenow）。

我尽可能放置所有脚本： ->引导CSS，jQuery，Popper和Boostrap js。

我缺少吗？

这是我的index.html文件->

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Vue Components</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link href='https://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet' type='text/css'> </head> <body> <div id="app"> </div> <script src="/dist/build.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>

这是我的Counter.vue组件文件->

<template> <div> <h4>Quotes Added</h4> <div class="progress" style="height: 20px;"> <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" > 50% </div> </div> </div> </template> <script> export default { } </script> <style scoped> h4 { text-align: left; } </style>

我希望在浏览器中显示一个进度条，其中进度已达到50％。但这只是0％。知道为什么吗？

Answer 1

更改此代码：-

<div 
            class="progress-bar progress-bar-striped progress-bar-animated bg-info"
            role="progressbar"
            style="width: 50%"
            aria-valuenow="50"
            aria-valuemin="0"
            aria-valuemax="100"
            >
            50%
        </div>

为

<div 
            class="progress-bar progress-bar-striped progress-bar-animated bg-info"
            role="progressbar"
            style="width: 50%"
            aria-valuenow="50"
            aria-valuemin="50"
            aria-valuemax="100"
            >
            50%
        </div>

使用VueJ在浏览器中不显示Bootstrap进度栏

1 个答案: