关于vue

最新推荐文章于 2024-05-05 03:24:38 发布

qq_55260564

最新推荐文章于 2024-05-05 03:24:38 发布

阅读量203

点赞数

文章标签： intellij-idea

本文链接：https://blog.csdn.net/qq_55260564/article/details/118958332

版权

这个示例展示了如何使用Vue.js进行弹性布局（Flexbox）的实现，包括'justify-start', 'justify-center', 'justify-end'和'justify-space-between'的对齐方式。同时，它还演示了如何通过$axios从后台获取并显示数据，如待办事项（todos）和用户信息（users）。

摘要由CSDN通过智能技术生成

<style>
.el-row {
  margin-bottom: 20px;
&:last-child {
   margin-bottom: 0;
 }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>

<template>
  <div>
    <div id="buttons">
      <el-row type="flex" class="row-bg">
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
      <el-row type="flex" class="row-bg" justify="center">
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
      <el-row type="flex" class="row-bg" justify="end">
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
      <el-row type="flex" class="row-bg" justify="space-around">
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
    </div>

    <div id="app">
      {{ message }}
    </div>
    <div id="app-1">
      <ol>
        <li v-for="todo in todos">
          {{ todo.text }}
        </li>
      </ol>
    </div>
    <div id="app-2">
      <table>
        <tr>
          <td>编号</td>
          <td>名字</td>
          <td>分数</td>
        </tr>
        <tr v-for="user in users">
          <td>{{ user.id }}</td>
          <td>{{ user.username }}</td>
          <td>{{ user.password }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data() {
    return {
      message: 'Hello Vue!',
      todos: [
        {text: "学习 JavaScript"},
        {text: "学习 Vue"},
        {text: "整个牛项目"}
      ],
      users: []
    }
  },
  created() {
    let site = "http://localhost:8080";
    let that = this;
    this.$axios.get(site + '/getUsers')
      .then(function (response) {
        that.users = response.data;
      })
    // this.$axios.get(site + '/getUsers')
    //   .then(response => (this.users = response.data))

  }
}
</script>