vue初识 --- table切换

Posted zwh520

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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="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,
        //items是从后台获取到的li内容
        items:["标签1","标签2","标签3"],
        // arry是从后台获取到的div中要显示的内容
        arry:[
            {"txt":"这是第 1 个div标签"},
            {"txt":"这是第 2 个div标签"},
            {"txt":"这是第 3 个div标签"}
        ]
    },
    //所有的事件方法集合
    methods: {
        clk(idx){
            // 点击的第几个li显示第几个div的内容
             this.flg = idx;
        }
    }
})
</script>

效果:

 技术分享图片

 

总结:

  实现了完全动态展示的table切换,从html中可以看出,我们是没有一个写死的文字或者数据的。

 某一天,当产品要修改里面的文本内容的时候,我们是不需要做任何修改的,只要后台去修改就ok啦。

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

 


 

以上是关于vue初识 --- table切换的主要内容,如果未能解决你的问题,请参考以下文章

vue项目table切换

vue项目table切换

初识Spring源码 -- doResolveDependency | findAutowireCandidates | @Order@Priority调用排序 | @Autowired注入(代码片段

初识Spring源码 -- doResolveDependency | findAutowireCandidates | @Order@Priority调用排序 | @Autowired注入(代码片段

在vue中使用elementUI饿了么框架使用el-tabs,切换Tab如何实现实时加载,以及el-table表格使用总结

IllegalArgumentException:快速切换 ActionBar 选项卡时没有找到片段 id 的视图