Vue中改变数组值，动态样式未发生变化的问题

在使用Vue.js进行前端开发时发现了一个问题，当数组数据发生变化时，页面中动态绑定的样式没有变化。最终在网上找到了解决方案，在此记录一下：

<div>
	<div v-for="(child,index) in list" :key="index" @click="change(child,index)">
		<video v-if="!child.flag" controls :src="child.videoUrl" autoplay muted>
        </video>
        <div v-else>
           <img class="bofang"  :src="require('../../../video.png')"/>  
          </div>
	</div>
</div>

methods: {
	change(item,index) {
      item.flag=true
      this.$set(this.list, index, item);  //关键代码
    },
}

主要功能为通过点击实现代码块里图片标签和视频标签的切换。
在点击事件里面，改变数组对应项的值后，页面并未发生变化，需要将数组set一下，才能实现

this.$set( target , index, value )
//target 需要改变的数据，index索引，value索引项需要改变的值

vue之所以能够监听Model的变化，是因为Javascript语言本身提供了Proxy或者Object.observe()的机制来监听对象状态的变化。
但是，对于数组元素的赋值却没有办法直接进行监听，因此会产生以上情况。

参考博文：https://blog.csdn.net/NAMECZ/article/details/83988806