vue 中 方法属性的一些用法

一、methods定义方法 到dom元素上使用

<div
    class="ratio"
    :class="{
        down: renderDownValue(
            dataList?.situationAveScoreModule?.proAveStabilityScoreChainRatio
        ),
        up: renderValue(dataList?.situationAveScoreModule?.proAveStabilityScoreChainRatio)
    }"
>
</div>

renderDownValue(data) {
    if (!data) return '';
    const dataArr = data.split('%');
    return dataArr[0] < 0;
},

二、computed 计算属性中处理一些字段 (变量，字符串)，里面属性发生改变时 外部实时改变更新

<div class="slice-name">{{ svCodeLabel }}</div>

computed: {
    svCodeLabel() {
        if (!this.svCode) {
            return '';
        } else {
            const s = this.stableCodes.find((o) => o.code === this.svCode.slice(0, 2))?.name;
            const v = this.valueCodes.find((o) => o.code === this.svCode.slice(2))?.name;

            return s + '稳定' + v + '价值';
        }
    }
},

三、方法中调用接口时，返回数据外部使用输出

HotAppLine(){
    return new Promise(resolve => {
        this.theMoon= this.queryForm.dateType;
     
        this.queryedForm = { ...this.queryForm };
        postAction('api/intentionResult/statisticsCaches',{...this.queryForm})
            .then((res) => {
                const  aa  = Number(res.allNumber) || 0;
                const name = aa >10000 ? `${(aa/10000).toFixed(2)} 万人` :   
                `${numberFormat(aa)} 人`;
                  //返回数据结果
                resolve(name);
            })
            .catch(() => {});
    });

},
//外部调用时 
const name2 = await this.HotAppLine();

四、watch监听 使用

//监听方法使用   直接调用方法this.show() 
watch: {
    show() {
    
     }
}
//监听 变量使用 
watch: {          //queryPage传的参数或自己定义的参数监听
    queryPage: {
        handler(val) {
            this.query = { ...this.query, ...val };
        },
        deep: true
    }
},