Vue方向：v-for循环中的key属性

v-for循环中的key属性

使用v-for更新已渲染的元素列表时，默认用就地复用策略，列表数据修改的时候，他会根据key值去判断某个值是否修改，如果修改，则重新渲染这一项，否则复用之前的元素；我们在使用的时候经常会使用index（即数组的下标）来作为key，但其实这是不推荐的一种使用方法；

key值的使用其实是和vue响应式以及虚拟DOM有关。

这样vue就会分析到其他的数据都不需要改变，只需要在新增一个DOM节点，然后添加新增的数据就可以了。

但是，如果输入我们是在数组中间插入的数据就会不一样了。

即后面的节点会不断的更新，这样做就会很没效率。

所以我们需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

key的作用主要是为了高效的更新虚拟DOM，另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

建议尽可能在使用v-for时提供key，除非遍历输出的DOM内容非常简单，或者刻意依赖默认行为以获取性能上的提升。

你可以绑定 dom 元素的 class 属性，但是你需要提前准备一些样式；

方法有很多的，我这里用计算属性

代码示例

<div v-for="Mes in Messages">

   <p :class="MessClass(Mes)">{{Mes}}</p>

 </div>

data()

{

return{

 Messages:["警告：你女朋友正在与其他异性聊天！","成功：一百块法定货币到账。","信息：你女朋友正在与其他异性聊天，你不慌吗？","危险：您的账户在异地登录。"]

}

},

计算属性

computed:{

MessClass()

{

return(Arg)=>{

switch(Argslice(0,3))

{

case "警告：":

 return "Warning";

 case "成功：":

 return "Success";

 case "信息：":

 return "Info";

 case "危险：":

 return "Danger";

 default:

 return "Info";

}

}

}

},

css 样式

Warning{

background-color:#E6A23C;

}

Success{

 background-color:#67C23A;

}

Info{

 background-color: #909399;

}

以上就是关于Vue方向：v-for循环中的key属性全部的内容，包括:Vue方向：v-for循环中的key属性、关于vue，如何在v-for中动态生成样式、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！