1、html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> <script src="js/vue.js"></script> </head> <body> <!-- 递归模板 --> <template id="diguiTempTest"> <li> <div :class="{bold: isFolder}"> {{model.data.menuName}} </div> <ul v-if="isFolder"> <item class="item" :model="test" v-for="test in model.childTreeNode"> </item> </ul> </li> </template> </div> <h1>递归组件测试</h1> <div id="diguiTest"> <ul v-for="model in message"> <item class="item" :model="model"></item> </ul> </div> <input type="button" value="更改" onclick="test6666()"/> </body> </html>
2、js
<script type="text/javascript"> Vue.component('item', { template: '#diguiTempTest', props: ['model'], computed: { isFolder: function () { if(this.model.childTreeNode.length == 0) { return false; }else { return true; } } } }) var vm = new Vue({ el : "#diguiTest", data : { message : [{ "id": "1", "data": { "menuName": "项目管理", "menuCode": "", }, "childTreeNode": [{ "data": { "menuName": "项目", "menuCode": "BusProject", }, "childTreeNode": [] }, { "data": { "menuName": "我的任务", "menuCode": "BusProject", }, "childTreeNode": [] }, { "data": { "menuName": "人员周报", "menuCode": "BusProject", }, "childTreeNode": [] }] }, { "id": "2", "data": { "menuName": "数据统计", "menuCode": "BusClock", }, "childTreeNode": [] }, { "id": "3", "data": { "menuName": "人事管理", "menuCode": "", }, "childTreeNode": [] }, { "id": "4", "data": { "menuName": "基础管理", "menuCode": "", }, "childTreeNode": [] }] }, }) function test6666() { var data = [{ "id": "1", "data": { "menuName": "项目管理6966", "menuCode": "", }, "childTreeNode": [{ "data": { "menuName": "项目666", "menuCode": "BusProject", }, "childTreeNode": [] }, { "data": { "menuName": "我的任务", "menuCode": "BusProject", }, "childTreeNode": [] }, { "data": { "menuName": "人员周报", "menuCode": "BusProject", }, "childTreeNode": [] }] }, { "id": "2", "data": { "menuName": "数据统计", "menuCode": "BusClock", }, "childTreeNode": [] }, { "id": "3", "data": { "menuName": "人事管理", "menuCode": "", }, "childTreeNode": [] }, { "id": "4", "data": { "menuName": "基础管理", "menuCode": "", }, "childTreeNode": [] }] } </script>
3、结果
