WS Element-ui Read Json List

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'}]";

猜你喜欢

转载自blog.csdn.net/qq_28197211/article/details/80562983