vue的props 属性类似于bug的东西

/*
 * @Author: shs 
 * @Date: 2019-04-19 17:48:39 
 * @Last Modified by: shs
 * @Last Modified time: 2019-04-22 11:30:55
 */
 <template>
   <div class="p-r" style="overflow: hidden" :style="{ widths, background: 'lightgray'}">
     <div class="p-a" :style="{ actwidths, background: '#4cf9ff'}"></div>
     <span class="left"><span>{{dataf.cur}}</span>{{dataf.leftword}}</span><span class="right">{{dataf.rightword1}}<span>{{dataf.total}}</span>{{dataf.rightword2}}</span>
   </div>
 </template>
 <script>
 export default {
    data () {
        return {
            actwidths: '0%'          
        }
    },
    props: {
        dataf: {
            type: Object,
            default: {
                total: 0,
                cur: 0,
                leftword: '台开机',
                rightword1: '总',
                rightword2: '台'
            }
        },
        widths: {
            type: String,
            defalut: '100%'
        },
        settings: {
            type: Object,
            defalut: {

            }
        }
    },
    methods: {
        
    },
    watch: {
        data: function(val, old) {
            if (val.total !== 0 && val.cur !== 0) { //total            
                this.actwidths = ((val.cur/val.total) * 100).toFixed(1) +'%'
                console.log(this.actwidths)
            }           
        }
    },
    mounted () {  //wait dom loading, operate data

        if (this.dataf.total !== 0&&this.dataf.cur !== 0) { //total
            console.log(this.dataf)
            this.actwidths = ((this.dataf.cur/this.dataf.total) * 100).toFixed(1) +'%'
            console.log(this.actwidths)
        } 
    }   
 }
 </script>

 <style lang="scss" scoped>
    $back-fill: #4cf9ff;
    $height: 30px;
    $font-color: white;
    .p-r {
        position: relative;
         100%;
        height: $height;
    }
    .p-a {
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        height: $height;       
    }
    .p-a:after {
        content: '';
        display: inline-block;
        position: absolute;
        top: 0;
        right: -10px;
        border-top: 20px solid $back-fill;
        border-left: 5px solid $back-fill;
        border-right: 5px solid transparent;
        border-bottom: 20px solid transparent;        
    }
    .left {
        display: inline-block;
        position: absolute;
        top:0;
        left: 10px;
        height: $height;
         50%;
        line-height: $height;
        color: $font-color;
    }
    .right {
        display: inline-block;        
        position: absolute;
        top: 0;
        right: 10px;
        height: $height;
         50%;        
        line-height: $height;
        text-align: right;
        color: $font-color;
    }
 </style>