将表单的项做成组件,用v-for遍历渲染数据。
<template>
<div>
<div class="item-list" v-for='item in items'>
<label for="">{{item.label}}</label>
<input type="text" :placeholder="item.placeholder">
</div>
</div>
</template>
在此要注意的是,v-for等指令不能直接使用在组件根元素上,即不能这样写:
<template>
<div class="item-list" v-for='item in items'>
<label for="">{{item.label}}</label>
<input type="text" :placeholder="item.placeholder">
</div>
</template>
另外,渲染属性的时候,要使用:进行绑定,否则无效。