【Vue】组件

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--组件:传递给组件的值:props-->
    <xt v-for="item in items" v-bind:xue="item"></xt>
    //v-bind:xue="item"将遍历的item项绑定到组件中props定义的名为xue属性上;
</div>
 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //定义一个Vue组件component
    Vue.component("xt",{
        props:['xue'],//接收参数
        template:'<li>{{xue}}</li>'
 
    });
    var vm = new Vue({
        el: "#app",
        data:{
            items:["Java","Linux","前端"]
        }
    });
 
</script>
</body>
</html>

  

posted @   iTao0128  阅读(96)  评论(0编辑  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
点击右上角即可分享
微信分享提示