Vue 的幾種數據類型處理方式

時間 2019-11-13

標籤 vue 幾種數據類型處理方式简体版

原文原文鏈接

第一種數據處理

在table的tr中，有些作爲父級，有些作爲子級，區別是用class來區分，點擊父級的按鈕，子級會隱藏和顯示切換。javascript

<body class="">
    <div id="example1">
        <table id="partnerTable">
            <template v-for="(item,index) in data">
                <tr class="parent">
                    <td>{{item.title}}</td>
                    <td><button v-if="item.children" @click="changeState(index)">改變</button></td>
                </tr>
                <template v-if="item.children">
                    <tr v-show="item.childShow" :class="'child_'+item.id" v-for="child in item.children">
                        <td>{{child.title}}</td>
                    </tr>
                </template>
            </template>
        </table>
    </div>
    <script src="../js/vue.js"></script>
    <script>
    var example1 = new Vue({
        el: "#example1",
        data: {
            data: [{
                    id: "row_1",
                    title: 'row1',
                    children: [{
                            title: 'row1-1',
                        },

                        {
                            title: 'row1-2'
                        }
                    ],
                    childShow: false,
                },
                {
                    id: "row_2",
                    title: 'row2',
                    children: [{
                            title: 'row2-1',
                        },

                        {
                            title: 'row2-2'
                        }
                    ],
                    childShow: false,
                },
                {
                    id: "row_3",
                    title: 'row3',
                },
                {
                    id: "row_4",
                    title: 'row4'
                }
            ]
        },
        methods: {
            changeState: function(index) {
                this.data[index].childShow = !this.data[index].childShow
            }
        }

    })
    </script>
</body>

總結：由於要分紅外層和內層循環，因此咱們用template把外層的tr包裹起來（必須用template包裹），內存能夠用template包裹也能夠不用。html

第二種數據類型--表格進行合併單元格的狀況

<table id="partnerTable">
  <thead>
    <tr>
      <th>客戶名稱</th>
      <th>招標數</th>
      <th>項目名稱</th>
      <th>項目狀態</th>
      <th>操做</th>	
    </tr>
  </thead>
  <tbody >
    <template v-for="item1 in data">
    <tr v-for="(item2,index) in item1.items">
      <td v-if="!index" :rowspan="item1.items.length">{{item1.clientName}}</td>
      <td v-if="!index" :rowspan="item1.items.length">{{item1.tenderAmount}}</td>
      <td>{{item2.projectName}}</td>
      <td>{{item2.projectStatus}}</td>
      <td>
        <button style="margin-right:10px;">訂閱</button>
        <button>查看詳情</button>
      </td>
    </tr>
	</template>
  </tbody>
</table>

var example1=new Vue({
        el:"#example1",
        data:{
            data:[
				  {
					clientName:'標題1',
					tenderAmount:'2',
					items:[
					  {projectName:'標題一有關的內容1',projectStatus:'招標'},
					  {projectName:'標題一有關的內容2',projectStatus:'擬在建'},
					]
				  },
				  {
					clientName:'標題2',
					tenderAmount:'4',
					items:[
					  {projectName:'標題二有關的內容1',projectStatus:'招標'},
					  {projectName:'標題二有關的內容2',projectStatus:'中標'},
					  {projectName:'標題二有關的內容3',projectStatus:'中標'},
					  {projectName:'標題二有關的內容4',projectStatus:'招標'},
					]
				  },

			]
        },

      })

上面的v-if="!index" 指index爲0 的狀況下，則顯示那一行的td，也就是合併橫跨的單元格，只顯示tr第一次循環中的td。vue

第三種狀況--二級列表

<ul>
    <li v-for="item in data">
        <a href="">item</a>
        <ul v-if="item.children">
            <li v-for="child in item.children"><a href="">child</a></li>
        </ul>
    </li>
</ul>

數據是第一種的數據格式類型java

第四種狀況 -- 多級數據（遞歸組件）

<body class="">
    <div id="example1">
        <my-trees v-bind:list="data"></my-trees>
    </div>
    <script src="../js/vue-2.6.10.js"></script>
    <script>
    var myTrees = {
        props: ["list"],
        name: "treeMenus",
        template: `
		 <ul class="tree-list">
		 	<li v-for="item in list">
			<a href="">{{item.title}}</a>
			<tree-menus :list="item.children"></tree-menus>
			</li>
		 </ul>
		 `,
    }
    var example1 = new Vue({
        el: "#example1",
        components: { myTrees },
        data: {

            data: [{
                    id: "row_1",
                    title: 'row1',
                    children: [
                        { title: 'row1-1' },
                        { title: 'row1-2' }
                    ],
                    childShow: false,
                },
                {
                    id: "row_2",
                    title: 'row2',
                    childShow: false,
                },
                {
                    id: "row_3",
                    title: 'row3',

                },
                {
                    id: "row_4",
                    title: 'row4',

                }
            ]

        },
        mounted: function() {
            this.$el.firstChild.className += " outul"
        }

    })
    </script>
</body>

遞歸組件必定要定義name屬性，經過name來調用自身。this