v-if条件渲染视频和图片

<template>
 <view class="tui-upload-item" v-for="(item,index) in files" :key="index">
 <image class='tui-upload-img' :src="item"  @tap="previewImage" mode="aspectFill" :id="item"  v-if="item.indexOf('.mp4') == -1"></image>
 <video class='tui-upload-img' :src="item"   v-if="item.indexOf('.mp4') != -1"   autoplay ></video>
 </view>
</template>


<script>
    import {publicing} from '../../api/api.js'
    import {posAfterDetails} from '../../api/request.js'
    var {log} = console
export default {
        data() {
            return {
                id:'',
                DetailsData:{},//申请详情数据
                files:[]
            }
        },
        methods: {
            //图片预览
            previewImage: function (e) {
                log(e.currentTarget.id)
                uni.previewImage({
                    current: e.currentTarget.id, 
                    urls: this.files
                })
            },
            //获取接口数据
            postAfterDetails(){
                var setdata = uni.getStorageSync('usermen')
                let data = {
                    token:setdata,
                    id:this.id
                }
                publicing(posAfterDetails,data)
                .then((res)=>{
                    log(res)
                    this.DetailsData = res.data.data
                    // this.files = res.data.data.imgList
                    let new_arr = res.data.data.imgList.map(obj => {return obj.url})//把链接提取出来
                    this.files = new_arr
                    
                })
                .catch((err)=>{
                    log(err)
                })
            },
        },
        onLoad(options) {
            console.log(options.id)
            this.id = options.id
            this.postAfterDetails()
            
        }
    }
</script>

数据格式，需要把链接单独提取，最后用v-if条件渲染图片和视频
最终效果