v-for渲染input屬性值


將表單的項做成組件,用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>

另外,渲染屬性的時候,要使用:進行綁定,否則無效。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,908評論 18 139
  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內容,還有我對于 Vue 1.0 印象不深的內容。關于...
    云之外閱讀 5,079評論 0 29
  • 1.安裝 可以簡單地在頁面引入Vue.js作為獨立版本,Vue即被注冊為全局變量,可以在頁面使用了。 如果希望搭建...
    Awey閱讀 11,096評論 4 129
  • Vue 實例 屬性和方法 每個 Vue 實例都會代理其 data 對象里所有的屬性:var data = { a:...
    云之外閱讀 2,241評論 0 6
  • 迎面吹來涼爽的晚風,好像有誰在路邊等。回憶在身邊蕩秋千,時針轉回到初四那年,往事歷歷在目,每天早晚的路,每天的課程...
    目光捕手一九八閱讀 379評論 0 0