本文共 1071 字，大约阅读时间需要 3 分钟。

使用template进行条件渲染

如下所示，有一段内容：

尊贵的年费会员
   
    此处内容仅年费会员可见！
   
亲爱的普通用户
   
    您不是年费会员无权访问，请前往用户中心充值！
   

这段内容如果想要加v-if进行条件渲染，一种做法是在外面套一个<div>，代码如下：

   
	
    
尊贵的年费会员
	
    
     此处内容仅年费会员可见！
    
   
   
	
    
亲爱的普通用户
	
    
     您不是年费会员无权访问，请前往用户中心充值！
    
   

但这样的话，渲染出来的html就会多出没用的div，这种情况下可以使用<template>，它可以作为不可见的包裹元素，最终渲染结果将不包含<template>，代码如下：

为什么不推荐使用template进行列表渲染

Vue官方文档上给了一个案例，使用template进行列表渲染：

<template> cannot be keyed. Place the key on real elements instead.

相信大家看到这个提示就明白问题出在哪里了。上一节内容讲到，<template>元素不会出现在最终的渲染结果中。假如给<template>元素绑定key，相当于key值就丢失了，等于没有绑定。

有的同学可能会问，key可以给内部元素绑定吗？答案是可以的，但强烈不推荐。原因是如果内部有很多平级的元素，就得给每个元素都加一个key，如下所示：

别以为这样就没问题了，按上面的逻辑，每一次循环就会有两个元素带有一模一样的key，显然这样是会报错的：

[Vue warn]: Duplicate keys detected: ‘xxx’. This may cause an update error

所以最好的解决方案就是不要使用<template>进行列表渲染。