我有一个 Bootstrap Vue ProgressBar。我需要添加到类“.progress-bar”伪元素 :: after with content icon(来自 FontAwsome)。我也希望它是动态的。因为我已经在我的 ProgressBar(从 0 tp 100 开始)中实现了步骤,我想要,当我点击时,这个图标将与 ProgressBar 行一起。
<b-progress v-bind:style="styleProgressBar" :value="counter" :max="max"></b-progress>
export default {
components:{
'navbar':navbar
},
name: "myPage",
data() {
return {
counter: 0,
max: 100,
step:1,
}
},
methods:{
prev() {
this.step--;
},
next() {
this.step++;
if (this.counter < 100) {
this.counter += 34;
}
}
}
}
Run Code Online (Sandbox Code Playgroud)
我也看到了这个:https : //vuejs.org/v2/guide/class-and-style.html
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
Run Code Online (Sandbox Code Playgroud)