vue自定义组件的坑:数组绑定与引号的使用

最近项目闲了下来，想利用空闲时间把工作中常用的代码都一一用vue的组件封装起来，一来加深自己对vue的理解，二来若是真的能在生产环境中直接使用，岂不血赚，但写着写着，发现有些代码出现了莫名其妙的错误

<div class="check-times-item" 
	:class="(item.val == details)?'check-times-item-active':'' "  
	v-for="(details,index) in item.list" 
	@click.stop="chooseCheckTimesItemAction(details,item)">
	{{details}}
</div>

就是这一段本该没有问题的代码，却一直在提示我报错，最终定位到问题是单引号的用法问题
原来组件的约定有几种形式：

1.

以单引号打头并收尾的写法，代码换行需要用链接，也就是我上面报错时的写法↓

template: '  
    
 <div>
 </div>
 '

以顿号打头并收尾的写法，为es6的新特性，不需要连接符，可以正常使用我一开始的写法↓

2.

template: `  
 <div>
 </div>
 `

但考虑到第二种实际为es6写法，在实际生产过程中可能出现一些不可预料的问题，关于这个问题的解决之后是否可以使用，我持疑问态度