vue基础

小小1992

于 2023-12-19 10:40:45 发布

阅读量38

点赞数

分类专栏： vue 文章标签： vue.js

原文链接：https://blog.csdn.net/m0_48166663/article/details/121023851

版权

vue 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

<div id="app">

<pan v-for="item in items" v-bind:panh="item"></pan>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
//定义组件
Vue.component("pan",{
props:['panh'],
template:'<li>{{panh}}</li>'

});
var vm = new Vue({
el:"#app",
data:{
items:["java","Linux","前端"]
}
});
</script>
</body>
</html>

说明：

v-for="item in items"：遍历Vue实例中定义的名为items的数组，并创建同等数量的组件
v-bind:panh="item"：将遍历的item项绑定到组件中props定义名为item属性上；= 号左边的panh为props定义的属性名，右边的为item in items 中遍历的item项的值
————————————————
版权声明：本文为CSDN博主「萌新小吉」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_48166663/article/details/121023851

小小1992

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础

v-bind:panh="item"：将遍历的item项绑定到组件中props定义名为item属性上；= 号左边的panh为props定义的属性名，右边的为item in items 中遍历的item项的值。原文链接：https://blog.csdn.net/m0_48166663/article/details/121023851。v-for="item in items"：遍历Vue实例中定义的名为items的数组，并创建同等数量的组件。--组件：传递给组件中的值：props-->
复制链接

扫一扫

专栏目录