Vue.js组件如何动态添加属性？使用循环批量绑定组件prop的实现方法

实现方案 #

你直接使用Vue内置的v-for列表渲染指令即可实现需求，无需手动编写多个组件，也不需要操作原生DOM。

模板代码示例 #

<News_Card
  v-for="(item, index) in all_data"
  :key="item.id || index"
  class="card"
  :title="item.title"
  <!-- 后续要新增其他prop直接加绑定即可，比如:content="item.abstract" -->
/>

说明 #

• v-for="(item, index) in all_data" 会遍历你的全量数据数组all_data，每遍历到一条数据就自动生成一个News_Card组件，当前遍历的单条数据存在变量item中
• 绑定prop时直接使用item.属性名取值即可，模板内不需要加this前缀
• key是v-for必填的唯一标识，若你的单条新闻数据有唯一id字段，优先用item.id作为key，渲染性能更好

额外提示 #

不要用document.getElementsByClassName这类原生DOM操作实现属性绑定，Vue本身是数据驱动视图的框架，你只要保证all_data数组里的数据正确，视图会自动和数据同步更新。

内容的提问来源于stack exchange，提问作者Zaid Ahmed Soomro