SOURCE

new Vue({
    // el: "#app",
    el: "#testInput",
    data: {
        tablist: [
            {name: "tab1"},
            {name: "tab2"},
            {name: "tab3"},
            {name: "tab4"}
        ],
        videoSourceList: [
            `https://txcdn-file-m.mvbox.cn/handup/5c7268cc68cb6011bc2db6828ea756b3.mp4`,
            `https://txcdn-file-m.mvbox.cn/handup/23d457478a1fd138f888f399f89cb9ab.mp4`,
            `https://txcdn-file-m.mvbox.cn/handup/c25b6e13b11dac262b1cb475724470be.mp4`,
            `https://txcdn-file-m.mvbox.cn/handup/23c710cef0ee37a49644f5d02f5a314d.mp4`,
        ],
        bfParam: {
            matchName: "",
            url: '',
            wrongProp:undefined
        },
        normalText:"哈哈哈哈哈哈"
    },
    mounted(){
        // this.$nextTick(()=>{
            // document.querySelectorAll("video")[0].play();
        // })
        console.log(this.$el.getAttribute('value')); // null
        console.log(this.$el.value); // test value
        console.log(this._vnode.data) //
    },
    methods: {
        // timeupdateFn:function(){},
        // playingFn: function(){},
        // videoError: function(){},
        // changeTabFn: function(i){
        //     console.log(i)
        //     console.log(document.getElementsByClassName('videoEle'+i))
        //     console.log(document.getElementsByClassName('videoEle'+i)[0])
        //     // this.$nextTick(function () {
        //         document.getElementsByClassName('videoEle'+i)[0].play()
        //     // })
        // },
        // stringify: function stringify(json){
        //     debugger
        //     return JSON.stringify(json)
        // },
    }
})

<!-- <div id="app">
    <div class="banner-container">
        <video v-for="(item,i) in videoSourceList" :key="i" :src="item" :class="['banner-video','videoEle'+i]" type="video/mp4" alt="VV中国年" muted preload="auto" webkit-playsinline="" playsinline="" x5-video-player-fullscreen="true" x5-video-player-type="h5-page" @timeupdate="timeupdateFn(i)" @playing="playingFn" @stalled="videoError" @error="videoError"></video>
    </div>
    <div class="tab-container">
        <div v-for="(item,i) in tablist" :key="i" class="tabs" @click="changeTabFn(i)">{{item.name}}</div>
    </div>
    <div :someprop="stringify(bfParam)">{{ normalText }}</div>
    <div :someprop="JSON.stringify(bfParam)">{{ normalText }}</div>
</div> -->

<input id="testInput" :value="'test value'">

.tab-container {
    width: 400px;
    display: flex;
    justify-content: space-around;
}
.tabs {
    background: pink;
}
.banner-container{
    width: 400px;
    height: 200px;
}
.banner-container video{
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 200px;
}