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切换
原文地址:https://www.cnblogs.com/zwh520/p/9662902.html
时间: 2024-11-11 13:41:11