WS Element-ui Read Json List

最新推荐文章于 2024-05-12 21:33:40 发布

OHISAY

最新推荐文章于 2024-05-12 21:33:40 发布

阅读量255

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_28197211/article/details/80562983

版权

VUE 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1 HelloWrold.vue ， create()开始，自动读取axios的内容，循环读取到ul里面。

<template>
  <div class="hello">
    <ul class="box">
      <li v-for="n in list">
      <el-popover
      placement="top-start"
      width="200"
      trigger="hover"
      :content="n.content">
        <el-button
        slot="reference"
        >
          {{n.message}}
        </el-button>
      </el-popover>
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    data(){
      return {
        list:[]
      }
    },
    created:function(){
      this.fetchData();
    },
    methods:{
      fetchData(){
        var _this = this;
        this.$axios.get("http://localhost:8888/hello1").then(res=>{
          _this.list = eval('(' + res.data + ')');
        });
      }
    }
  }
</script>
<style scoped>
.box{
  float: left;
  text-align: center;
}
</style>

2 后端传送内容

        return "[{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," +
                "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," +
                "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," +
                "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," +
                "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," +
                "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," +
                "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," +
                "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," +
                "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," +
                "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," +
                "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," +
                "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," +
                "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," +
                "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," +
                "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," +
                "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," +
                "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," +
                "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," +
                "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," +
                "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}]";