69 lines
1.2 KiB
HTML
69 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
</head>
|
|
<body>
|
|
<div id="ttt">
|
|
<App :treedata="treedata"></App>
|
|
</div>
|
|
|
|
</body>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.40/dist/vue.global.min.js"></script>
|
|
<script type="module">
|
|
const { createApp } = Vue;
|
|
import App from './App.vue.js';
|
|
|
|
|
|
const treedata = {
|
|
name: 'My Tree',
|
|
children: [
|
|
{ name: 'hello' },
|
|
{ name: 'wat' },
|
|
{
|
|
name: 'child folder',
|
|
children: [
|
|
{
|
|
name: 'child folder',
|
|
children: [{ name: 'hello' }, { name: 'wat' }]
|
|
},
|
|
{ name: 'hello' },
|
|
{ name: 'wat' },
|
|
{
|
|
name: 'child folder',
|
|
children: [{ name: 'hello' }, { name: 'wat' }]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
|
|
let sss = createApp({
|
|
data() {
|
|
return {
|
|
treedata
|
|
}
|
|
},
|
|
components: {
|
|
App: App
|
|
}
|
|
}).mount("#ttt");
|
|
</script>
|
|
<style>
|
|
/*
|
|
.item {
|
|
cursor: pointer;
|
|
line-height: 1.5;
|
|
color:red;
|
|
}
|
|
.bold {
|
|
font-weight: bold;
|
|
color:green;
|
|
}
|
|
|
|
*/
|
|
</style>
|
|
</html> |