在 Vue 中使用 HTML5 自定义属性 data-*。
代码示例：
<template><imgclass="img"v-for="(item, index) in imgs":key="item.id":src="item.url"data-type="img"@click="choose($event, index)"/></template>
获取自定义属性：
{choose(e, index) {this.imgIndex = index;console.log(e.target.dataset.type); // 'img'}}
动态赋值和静态赋值的区别就是在 data-* 前添加冒号（:）。
<template><imgclass="img"v-for="(item, index) in imgs":key="item.id":src="item.url":data-item="item"@click="choose($event, index)"/></template>
如果动态赋值的值为对象类型，需要通过 JSON.stringify() 转化为字符串类型。
<template><imgclass="img"v-for="(item, index) in imgs":key="item.id":src="item.url":data-item="JSON.stringify(item)"@click="choose($event, index)"/></template>
获取属性：
{choose(e, index) {console.log(JSON.parse(e.target.dataset.item));}}
key：用于 Vue 的虚拟 DOM 算法新旧 Nodes 对比辨识
<ul><li v-for="item in items" :key="item.id">...</li></ul>
ref：用于元素或自组建注册引用信息
<!-- vm.$refs.p 会是 DOM 节点 --><p ref="p">hello</p><!-- vm.$refs.child 会是子组件实例 --><child-component ref="child"></child-component><!-- 当动态绑定时，我们可以将ref定义为回调函数，显式地传递元素或组件实例 --><child-component :ref="(el) => child = el"></child-component>
is：用于动态组件
<!-- component changes when currentView changes --><component :is="currentView"></component>