本文共 589 字，大约阅读时间需要 1 分钟。

Demo

使用Vue.js实现

javascript

new Vue({el: "#app",data: {//可以手写 可以掉后台接口 二选一eleFileList: ['魔兽世界', '暗黑破坏神Ⅲ', '星际争霸Ⅱ', '炉石传说', '风暴英雄',  '守望先锋'],activeName: '',    //选中样式}, //获取接口中的内容mounted() {    if (Array.isArray(this.eleFileList) && this.eleFileList.length) {      this.content = this.eleFileList[0].contractTemplateContent;    }  },  methods: {  //定义事件    switchContract(item) {      this.content = item.contractTemplateContent;      console.log(item)      this.activeName =item;      }},})

html

         //展示的内容        {
  { item.contractTemplateName }}            

 css

添加.active  设置高亮的样式即可实现

转载地址：http://glven.baihongyu.com/