有的时候我们变化data内的内容,console.log打印的时候是显示已经变化了的,但并没有渲染到界面上去。受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。

具体请戳深入响应式原理

下面我们来说解决方法,其实找到原因后解决起来就很容易了(我们数学老师经常说万事开头难(∩_∩))。

情况一:简单的数据展示上不刷新
1.$set()方法重新渲染
this.$set(this.student,"age", 24)
//this.student为你在data中声明的数组名,‘age’是你要改变的数组下的指定字段名,24是你要变化的值
2.深拷贝
let name2 = JSON.parse(JSON.stringify(this.name));
//执行完业务代码后
this.name = name2

情况二:vue video src改变 视频展示区不刷新

1.不绑定source标签里的src属性,而绑定video标签中的src属性。

<video v-if="!imageName" id="video" controls="controls" width="400" height="300"  :src="uploadFile" alt="视频加载失败">
<!-- <source :src="uploadFile" alt="视频加载失败"/> -->
 </video>

2.this. n e x t T i c k ( ) 一 开 始 , 用 v − i f 将 v i d e o 元 素 隐 藏 , 当 s r c 值 改 变 的 时 候 , 为 获 取 更 新 后 的 D O M , 将 s h o w V i d e o 变 为 t r u e 的 方 法 放 在 t h i s . nextTick() 一开始,用v-if将video元素隐藏,当src值改变的时候,为获取更新后的DOM,将showVideo变为true的方法放在this. nextTick()vifvideosrcDOMshowVideotruethis.nextTick()中,触发浏览器的重排,可以使浏览器重新读取source元素的src值,重新获取视频资源。这种方法,适用于有在视频区域上覆盖图片的产品需求。

<template>
    <div id="login">
      <div>登录页面</div>
      <div class="video">
        <div class="videoChild" @click="disappearMask" v-show="showMask"></div>
        <video v-if="showVideo" preload="auto" controls>
          <source  :src="`../../static/${currentSrc}.mp4`" type="video/mp4">
        </video>
      </div>
      <p class="btns">
        <button @click="beforeOne" :class="{active: selfNum === 0}">上一个</button>
        <button @click="afterOne" :class="{active: selfNum === 1}">下一个</button>
      </p>
    </div>
</template>
 
<script>
export default {
  name: 'Login',
  data () {
    return {
      srcArr: ['company', 'self'],
      currentSrc: 'company',
      showVideo: false,
      showMask: true,
      selfNum: 0
    }
  },
  methods: {
    beforeOne () {
      this.currentSrc = this.srcArr[0]
      this.selfNum = 0
      this.showMask = true
      this.showVideo = false
    },
    afterOne () {
      this.currentSrc = this.srcArr[1]
      this.selfNum = 1
      this.showMask = true
      this.showVideo = false
    },
    disappearMask () {
      this.showMask = false
    }
  },
  mounted: function () {
    this.currentSrc = this.srcArr[0]
  },
  watch: {
    currentSrc () {
      this.$nextTick(() => {
        this.showVideo = true
      })
    }
  }
}
</script>
<style scoped lang="less">
#login{
  .video{
    width: 400px;
    height: 300px;
    position: relative;
    video{
      width: 400px;
      height: 300px;
    }
    .videoChild{
      position: absolute;
      top: 0;
      left: 0;
      width: 400px;
      height: 300px;
      background: aqua;
      z-index: 1000;
    }
  }
  .btns{
    .active{
      color: red;
    }
  }
}
</style>
Logo

前往低代码交流专区

更多推荐