小编Iva*_*ich的帖子

Vue.js v-bind:style 伪元素::内容图标之后

我有一个 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)

html css vue.js bootstrap-4

3
推荐指数
3
解决办法
8202
查看次数

标签 统计

bootstrap-4 ×1

css ×1

html ×1

vue.js ×1