北京做网站的大公司三亚海棠警方拘留3名涉黄人员

北京做网站的大公司,三亚海棠警方拘留3名涉黄人员,上海 培训网站建设,wordpress展示备案号recursion 递归 使用递归组件可以方便地在组件内部递归地渲染子节点。例如#xff0c;可以使用一个名为 tree-node 的组件#xff0c;该组件在其模板中递归地包含自身#xff0c;并在每一层次上显示节点的标签和其子节点。这样#xff0c;当数据发生变化时#xff0c;组件…recursion 递归使用递归组件可以方便地在组件内部递归地渲染子节点。例如可以使用一个名为 tree-node 的组件该组件在其模板中递归地包含自身并在每一层次上显示节点的标签和其子节点。这样当数据发生变化时组件会自动重新渲染并保持节点层次结构的正确性。![[850X850.PNG]]多级菜单数据data.jsconst data [ { id: 1, title: 汉堡店, cont: [ { id: 2, title: 小吃系列, cont: [ { id: 3, title: 轰炸大鱿鱼}, { id: 4, title: 香酥鸡柳}, { id: 5, title: 脆皮土豆} ] }, { id: 6, title: 汉堡系列, cont: [ { id: 7, title: 深海鳕鱼堡}, { id: 8, title: 香辣鸡腿堡}, { id: 9, title: 劲脆鸡腿堡} ] }, { id: 10, title: 饮品系列, cont: [ { id: 11, title: 可口可乐}, { id: 12, title: 雪碧}, { id: 13, title: 冰淇淋} ] } ] }, { id: 11, title: 牛排店, cont: [ { id: 12, title: 牛排系列, cont: [ { id: 13, title: 黑椒牛排}, { id: 14, title: 西冷牛排}, { id: 15, title: 菲力牛排} ] }, { id: 16, title: 咖啡系列, cont: [ { id: 17, title: 卡布奇诺}, { id: 18, title: 摩卡} ] }, { id: 20, title: 沙拉系列, cont: [ { id: 21, title: 水果沙拉}, { id: 22, title: 鸡胸肉沙拉}, { id: 23, title: 牛排沙拉} ] } ] }, { id: 31, title: 红酒店, cont: [ { id: 32, title: 国产葡萄酒系列, cont: [ { id: 33, title: 长城红标}, { id: 34, title: 张裕二星}, { id: 35, title: 王朝干红} ] }, { id: 36, title: 进口葡萄酒系列, cont: [ { id: 37, title: 法国都夏}, { id: 38, title: 拉菲庄园}, { id: 39, title: 卡斯特.巴蒂} ] }, { id: 40, title: 洋酒系列, cont: [ { id: 41, title: 杰克丹尼}, { id: 42, title: 人头马部落}, { id: 43, title: 轩尼诗VSOP} ] } ] } ] export default data递归****组件定义Vue3递归****组件的父组件script setup import foodMenu from ./foodMenu.vue; import menuData from ./data.js /script template div classrecursion h3递归组件的父组件/h3 foodMenu :menu-datamenuData/foodMenu /div /template style langscss scoped /style递归****组件script setup defineProps({ menuData: Array }) /script template ul li v-formenu in menuData :keymenu.id p---{{ menu.title }}/p food-menu :menu-datamenu.cont/food-menu /li /ul /template style langscss scoped/styleVue2递归****组件的父组件template div idapp food-menu :menu-datamenuData/food-menu /div /template script import menuData from ./data; import foodMenu from ./FoodMenu.vue export default { data(){ return { menuData: menuData } }, components: { foodMenu } }; /script style langscss /style递归****组件foodMenu.vue递归组件的技术要点 一定要设置name属性递归使用时用得就是name属性的值template ul li v-formenu in menuData :keymenu.id p---{{ menu.title }}/p food-menu :menu-datamenu.cont/food-menu !-- 等价于: ul li p/p ul li p/p /li /ul /li /ul -- /li /ul /template script export default { // 组件的name属性有三种用法 // 1. keep-alive include组件的name/keep-alive // 2. vue devtools 显示组件的name // 3. 递归组件 name: foodMenu, props: [menuData], data() { return {}; }, }; /script style /style