vue学习笔记之——v-for与局部组件的传值
来源：互联网 发布：php过滤所有的空格 编辑：程序博客网 时间：2024/06/05 10:13
在vue2.0中列表渲染也是一门学问，如果你的列表用到了v-for进行数据遍历，而且每一项使用一个自定义组件包裹，像这样
<div id="app">
<user-profile v-for="user in users" :user="user"></user-profile>
</div>
其中：user就是组件元素的属性，在创建组件时只需要通过props引入其对应的数据，就可以通过组件得到相应的列表标签，完整代码如下:
<body>
<div id="app">
<user-profile v-for="user in users" :user="user"></user-profile>
</div>
<script>
new Vue({
el: '#app',
data:{
users:[
{
name:"BoBo",
email:"bobo@163.com"
},{
name:"Peter",
email:"peter@163.com"
}]
},
components: {
'user-profile': {
template:"<li>{{user.name}} {{user.email}}</li>",
props:["user"]
}
}
})
</script>
</body>
下面是运行结果：
- vue学习笔记之——v-for与局部组件的传值
- Vue学习——v-for
- Vue.js学习笔记：v-for循环
- Vue.js的小片段——Vue中一个组件的v-for(props,is="todo-item")
- vue 的局部组件
- vue中v-if与v-for的区别
- vue.js学习笔记之v-bind,v-on
- vue全局组件与局部组件的方法
- vue.js学习笔记（六）--利用v-model实现父子组件间的双向通信
- v-for与组件的结合使用
- vue.js之v-for
- 学习vue的弯弯绕绕之v-for循环输出图片
- vue 组件 全局注册与局部注册的方法
- vue的v-for使用
- Vue v-for 的反面教材。
- vue学习01--v-bind:title/v-if/v-for
- vue.js学习笔记之属性绑定 v-bind
- vue学习笔记5 v-pre v-cloak v-once
- Vuex 通俗版教程
- IOS上webView中使用html5 video的问题
- Ubuntu-Python2.7安装 scipy,numpy,matplotlib
- 与MQ通讯的完整JAVA程序
- Android实现推送方式解决方案
- vue学习笔记之——v-for与局部组件的传值
- sscanf和sprintf的用法
- Vue2.0 探索之路——vuex入门教程和思考
- 牛人经验1(逻辑工程师必须寻求转型)
- VPN业务相关常用名词
- VS环境下C#控制台远程连接oracle数据库无需安装客户端非常简单
- 四位数中吸血鬼数的查找
- 快速排序算法java版实现
- 【算法题】希尔排序
