vue的table切換

HTML：

<div id="box">
    <ul>
        <li v-for="(item,index) in items" v-text="item" @click="clk(index)" @mouseover="clk(index)" @mouseout="clk(0)" :class="index == 0 ? cur :'tab_li'"></li>
    </ul>
    <div v-for="(item,index) in arry" v-show="index === flg ? true : false"  v-text="item.txt" class="count"></div>
</div>

 JS ：

<script>
//渲染
new Vue({
    el: "#box",
    data:{
        //初始化顯示第1個div里面的內容
        flg:0,
        cur:'li_current tab_li',
        //items是從后台獲取到的li內容
        items:["標簽1","標簽2","標簽3"],
        // arry是從后台獲取到的div中要顯示的內容
        arry:[
            {"txt":"這是第 1 個div標簽"},
            {"txt":"這是第 2 個div標簽"},
            {"txt":"這是第 3 個div標簽"}
        ]
    },
    //所有的事件方法集合
    methods: {
        clk(idx){
            if(idx !== 0){
                this.cur = 'tab_li';
            }else{
                // 點擊的第幾個li顯示第幾個div的內容,第幾個li高亮顯示
                this.cur = 'li_current tab_li';
            }
            this.flg = idx;

        }
    }
})
</script>

 效果：

總結：

  實現了完全動態展示的table切換，從html中可以看出，我們是沒有一個寫死的文字或者數據的。

 某一天，當產品要修改里面的文本內容的時候，我們是不需要做任何修改的，只要后台去修改就ok啦。

 不用前端做什么的修改，是不是超開心。^_^

 

---