vu的图片渲染问题

怼烎@ 2023-02-14 15:34 4阅读 0赞

## 左边的服务类型： ##

*  使用v-for渲染页面
 *  布局：左中右的 父级flex布局 并且设置justify-content: space-between;中间文字长短不一，不会出现三个都是左对齐  
    需要给左边的img和中间的文字一起加一个div 让他flex布局

### 右边的应用统计： ###

*  没有使用v-for 直接拿数据

### 右边的服务监控： ###

*  flex布局 一个title+4个盒子 给title的**width：100%** 独占一行 就可以让四个盒子flex布局

### 图片渲染 ###

*  如果是下面的代码是不管是网址路径还是本地路径都是直接可以渲染的

*  如果是**在data里面放数据**：
    
    **网址**：是可以直接渲染的  
    **本地地址**：直接渲染无效，需要require方式才能显示

<div v-for="(item,i) in listLeft" :key="i" class="data-service-index-left-box">                          
       <img  :src="item.url" class="data-service-index-left-box-img"  alt="">
    </div>
    
    
    //js部分
    export default { 
        data() { 
            return { 
                listLeft:[
                    { 
                        id:1,
                        //这里使用img："../../../../assets/image/index/dataService/数据需求@2x.png"会显示不出来
                        url:require("../../../../assets/image/index/dataService/数据需求@2x.png"),
                        
                    },
                ],
           };
       },
     }

# button的native #

给子组建绑定原生事件（@click.native）

通过.native属性后就不用通过子组件的事件触发this.$emit(‘事件’)触发了  
.native - 监听组件根元素的原生事件。  
主要是给自定义的组件添加原生事件。  
例如：

<el-button type="primary"@click.native="goOtherPath(item.applyPath)">申请</el-button>