时间:2021-07-01 10:21:17 帮助过:10人阅读
html代码:
- <script type="text/x-template" id="item-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 class="item" v-for="model in model.children" :model="model">
- </item>
- </ul>
- </li>
- </script>
- <ul id="demo">
- <item class="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="http://www.wfqcp.com/" rel="external nofollow" >潍坊长途汽车站</a></li>
- var demo = new Vue({//创建一个vue实例,绑定树形数据
- el: '#demo',
- data: {
- treeData: data
- }
- })
- </script>
以上所述是小编给大家介绍的vue.js树形组件之删除双击增加分支实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!