<script type="text/x-template"> <li> <div :class="{bold: isFolder}" @click="toggle"> {{model.name}} <span v-if="isFolder">[{{open ? '-' : '+'}}]</span> </div> <!--v-show控制当前元素的display属性，根据v-show里面的值来判断，true显示，false不显示--> <ul v-show="open" v-if="isFolder"> <!--model用于双向绑定数据--> <item v-for="model in model.children" :model="model"> </item> </ul> </li> </script> <ul> <item :model="treeData"> </item> </ul>
这里使用x-template全局属性，页面加载不显示，但是可供js使用
js代码：
<script> //加载树形结构初始数据，可用ajax获取 var data = { name: 'My Tree', children: [ { name: '一级' }, { name: '一级' }, { name: '一级有子菜单', children: [{ name: '二级有子菜单', children: [ { name: '三级' }, { name: '三级' } ] }, { name: '二级' }, { name: '二级' } ] } ] } Vue.component（'item', {//获取全局组件（可用于注册组件） template: '#item-template', props: { model: Object//定义model数据格式 }, data: function（） { return { open: false//vue对样式改变操作，true显示 false不显示 } }, computed: {//读取写入函数，不写get,set则为只读 isFolder: function（） { return this.model.children } }, methods: { toggle: function（） { if（this.isFolder） { this.open = !this.open//打开树形结构 } } } }） <li><a href="https://www.wfqcp.com/" >潍坊长途汽车站</a></li> var demo = new Vue（{//创建一个vue实例，绑定树形数据 el: '#demo', data: { treeData: data } }） </script>
以上所述是小编给大家介绍的vue.js树形组件之删除双击增加分支实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: