判断对象数组中某属性是否为空,如果是空就显示样式,如果不为空就显另种样式。文本框中的文字是某属性全部值(拼接)

项目需求:判断对象数组中的value属性是否为空,如果全部为空显示“ + 内容 ”;只要对应行的[] 中{}的value有一个不为空就显示文本框,文本框中的文字是对应该所有value值的拼接。

最终效果如图:

判断对象数组中某属性是否为空,如果是空就显示样式,如果不为空就显另种样式。文本框中的文字是某属性全部值(拼接)_第1张图片 最终效果图​​​

 

 

data(){
        return{
           sendContents:[ 
                [ {"value": "${email}"}],
                [ {"value": "${first_sale_date}"},{"value": "${mobile}"}],
                [ {"value": ""}],
                [ {"value": ""},{"value":"${abc}"}]
            ]
        }
    },
   methods:{
        add(){},
        showAdd(data,type){
            const val = data.find(item =>{
                return item.value != ''
            })
            if(type == 1){
                return val ? false : true; 
            }else if(type == 2){
                return val ? true : false;
            }
        },
        showText(data){
            let text = '';
            for(let [index,item] of data.entries()){
                // console.log(index,item)
                text +=`${item.value};`
            }
            return text;
            // data.forEach(element => {//这个地方如果只需要value值的话,我测试的用forEach也可以实现。
            //     text +=`${element.value};`
            // });
            // return text;
        }
    }
}

附加:entries()方法可参考 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries

你可能感兴趣的:(vue,v-if跟方法,v-text跟方法,entries())