ASP.NET Web Forms 页面不显示
0
悬赏园豆：20
[待解决问题]
<div id="app"></div>
<script src="Scripts/vue.min.js"></script>
<script src="Scripts/vue-awesome-swiper.js"></script>
<script>
Vue.component('menu-item', {
props: ['item'],
template: <div class="menu-item" @click="toggle"> {{ item.title }} <div v-if="item.isOpen" class="sub-menu"> <menu-item v-for="(subItem, index) in item.subItems" :key="index" :item="subItem" /> </div> </div> ,
data() {
return {
localIsOpen: false
};
},
computed: {
isOpen() {
return this.localIsOpen;
}
},
methods: {
toggle() {
this.localIsOpen = !this.localIsOpen;
// 如果需要，可以在这里发出一个事件来通知父组件
// this.$emit('toggle', this.item);
}
}
});
new Vue({
el: '#app',
data() {
return {
menuItems: [
{
title: '菜单1', isOpen: false,
subItems: [
{
title: '菜单1-1', isOpen: false,
subItems: [
{
title: '菜单1-1-1', isOpen: false, subItems: [{
title: '菜单1-1-1-1', isOpen: false,
subItems: [
{
title: '菜单1-1-1-1-1', isOpen: false, subItems: [{
title: '菜单1-1-1-1-1-1', isOpen: false,
subItems: [
{ title: '菜单1-1-1-1-1-1-1', isOpen: false, subItems: [] },
{ title: '菜单1-1-1-1-1-1-2', isOpen: false, subItems: [] }
]
}]
},
{ title: '菜单1-1-1-2', isOpen: false, subItems: [] }
]
}]
},
{ title: '菜单1-1-2', isOpen: false, subItems: [] }
]
},
{
title: '菜单1-2', isOpen: false,
subItems: [
{ title: '菜单1-2-1', isOpen: false, subItems: [] }
]
}
]
},
{
title: '菜单2', isOpen: false,
subItems: [
{ title: '子菜单2-1', isOpen: false, subItems: [] },
{ title: '子菜单2-2', isOpen: false, subItems: [] },
{ title: '子菜单2-3', isOpen: false, subItems: [] }
]
}
]
};
},
template: `
<menu-item v-for="(item, index) in menuItems"
:key="index"
:item="item" />
`
});
</script>
<style>
.menu-item {
cursor: pointer;
margin-bottom: 10px;
}
.sub-menu {
margin-left: 20px;
}
</style>
所有回答(3)
0
康康你的代码
0
<div id="app">
<menu-item :item="menuData"></menu-item>
</div>
<!-- 确保 Vue 脚本已正确引入 -->
<script src="Scripts/vue.min.js"></script>
<script>
// 定义 menu-item 组件
Vue.component('menu-item', {
props: ['item'],
template: <div class="menu-item" @click="toggle"> {{ item.title }} <div v-if="isOpen" class="sub-menu" @click="toggle"> <menu-item v-for="(subItem, index) in item.subItems" :key="index" :item="subItem"></menu-item> </div> </div> ,
data() {
return {
isOpen: false
};
},
methods: {
toggle() {
this.isOpen = !this.isOpen;
}
}
});
// 创建 Vue 实例，并传入根组件的数据
new Vue({
el: '#app',
data: {
menuData: {
title: 'Root Menu',
subItems: [
{
title: '菜单1',
subItems: [
{
title: '菜单1-1',
subItems: [
{
title: '菜单1-1-1',
subItems: [{
title: '菜单1-1-1-1',
subItems: [
{
title: '菜单1-1-1-1-1',
subItems: [{
title: '菜单1-1-1-1-1-1',
subItems: [
{
title: '菜单1-1-1-1-1-1-1',
subItems: []
},
{
title: '菜单1-1-1-1-1-1-2',
subItems: []
}
]
}]
},
{
title: '菜单1-1-1-2',
subItems: []
}
]
}]
},
{
title: '菜单1-1-2',
subItems: []
}
]
},
{
title: '菜单1-2',
subItems: [
{
title: '菜单1-2-1',
subItems: []
}
]
}
]
},
{
title: '菜单2',
subItems: [
{
title: '子菜单2-1',
subItems: []
},
{
title: '子菜单2-2',
subItems: []
},
{
title: '子菜单2-3',
subItems: []
}
]
}
]
}
}
});
</script>
<style>
.menu-item {
cursor: pointer;
padding: 5px;
border: 1px solid #ccc;
margin-bottom: 5px;
}
.sub-menu {
padding-left: 20px;
}
</style>
0
@ 这个在asp.net 中是特殊符号， 需要转义的
错误信息是什么？
– dudu 2周前