vue学习笔记（四）：条件和循环

使用如下代码：

<template>
  <div>
    <table :key="data.id" border="1" width="300px">
      <tr v-if="data.length===0">
        <td colspan="5">{{"无数据"}}</td>
      </tr>
      <tr v-else v-for="arr_one in data" :key="arr_one.id"> <!-- 这里用:key绑定一个主键给vae内部使用 -->
          <td>{{arr_one.id}}</td>
          <td>{{arr_one.name}}</td>
          <td>{{arr_one.alias}}</td>
          <td v-if="arr_one.is_delete===1">{{"已经删除"}}</td>
          <td v-else-if="arr_one.is_delete===0">{{"未删除"}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  //mounted属性，文档加载完毕就加载数据
  mounted:function(){
    this.get_remote_data();
  },
  data: () => {return {data:[]}},
  methods:{
    //使用axios获得远程数据
    async get_remote_data() {
      //不使用代理跨域的的情况
      const resp = await axios.get("http://localhost:80/my/article/cates");
      this.data = resp.data.data;
    }
  }
}
</script>