专栏首页Kirin博客Vue某些情况下 v-model绑定数据不实时更新解决办法

Vue某些情况下 v-model绑定数据不实时更新解决办法

有的时候我们变化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是你要变化的值
  • 1
  • 2
2.深拷贝
let name2 = JSON.parse(JSON.stringify(this.name));
//执行完业务代码后
this.name = name2
  • 1
  • 2
  • 3
  • 4
情况二: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>
  • 1
  • 2
  • 3

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()一开始,用v−if将video元素隐藏,当src值改变的时候,为获取更新后的DOM,将showVideo变为true的方法放在this.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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue图片验证码-自定义组件高级版

    需要注意的是如果需要在一个页面上引用两个验证码组件,那么需要自己新建两个验证码模块组件,

    kirin
  • VUE开发–获取DOM对象和组件对象(十九)

    kirin
  • vue 定时器+axios 连续请求

    //这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)

    kirin
  • 利用js实现输入框动态提示信息

    为了提高和用户的交互性,现在的输入框往往都采用输入信息自动提示的功能,类似于百度输入框中的提示功能。 设计思路是:在输入框input的组件下面放置一个div,这...

    林老师带你学编程
  • VUE+WebPack:开发一款太空版植物大战僵尸的前端页游

    望月从良
  • vue实现分页组件

    分页需要的字段:当前页(curPage),每页大小(pageSize),总页数(total) 作为一个组件,所以以上这些参数最好是从父组件传递过来,可以如下定义...

    陨石坠灭
  • Cocos Creator 实现左右跳游戏

    游戏开始后,点击屏幕左右两侧,机器人朝左上方或右上方跳一步,如果下一步有石块,成功得1分,否则游戏结束。

    张晓衡
  • vue实现分页组件

    分页需要的字段:当前页(curPage),每页大小(pageSize),总页数(total) 作为一个组件,所以以上这些参数最好是从父组件传递过来,可以如下定义...

    陨石坠灭
  • Cocos Creator实现左右跳游戏

    游戏开始后,点击屏幕左右两侧,机器人朝左上方或右上方跳一步,如果下一步有石块,成功得1分,否则游戏结束。

    一枚小工
  • React学习记录

    1、React DOM 在渲染所有输入内容之前,默认会进行转义。它可以确保在你的应用中,永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了...

    Tiffany_c4df

扫码关注云+社区

领取腾讯云代金券