<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>局部组件</title>
</head>
<body>
<div id="app">
{{msg}}
<com></com>
</div>
<script type="x-template" id="footer">
<div>
<ul>
<li v-for="item in items">
{{item.id}}--{{item.username}}
</li>
</ul>
</div>
</script>
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
msg: 111,
},
components: {
com: {
data() {
return {
msgs: "首页",
items: [
{ id: 1, username: "111" },
{ id: 2, username: "222" },
{ id: 3, username: "333" },
{ id: 4, username: "444" },
{ id: 5, username: "555" },
{ id: 6, username: "666" },
{ id: 7, username: "777" },
],
};
},
methods: {
show() {
alert("122");
},
},
template: "#footer",
},
},
});
</script>
</html>
网友评论