vue style 绑定问题

时间:2022-06-22
本文章向大家介绍vue style 绑定问题，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

重构稿如下：

<div id="show-img"  class="showUploadImg">
	<li class="" style="background:url(xxx) no-repeat center center;background-size:contain;z-index:10"></li>
	<i class="weui-icon-cancel" id="delImg-icon"></i>
</div>

先这样：

<li class="" :style="{background:'url(xxx)  no-repeat center center'}" style="background-size:contain;z-index:10"></li>

这种不行。

必须把background要分离开写，如下：

computed: {
            specialstyle(){     //样式问题
                return {
                    'background-image' : 'url('+this.apply_info.main_pic+')',
                    'background-repeat': 'no-repeat',
                    'background-size'  : 'contain',
                    'background-position':'center',
                    'z-index': 10,
                    //'background': 'url('+this.apply_info.main_pic+') no-repeat center center',    //这两种方式不行
                    //'background-size': 'contain',
                }
            },
}

随机文章
Javascript知识点必读
最近更新