Vue.js实现简单的表格

Vue.js实现简单的表格1.代码如下<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X

还不起来学习？

8515人浏览 · 2020-12-11 18:27:22

还不起来学习？ · 2020-12-11 18:27:22 发布

Vue.js实现简单的表格

1.代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
<!--CSS样式外联link引入 -->
</head>
<body>
  <div id ="app" align ="center">
  <table border="2" >
    <font>{{ message }}</font> 
    <tr>
      <th v-for="th in title">{{th}} </th>
    </tr>
    <tr v-for = "people in data">
      <td>{{people.id}}</td>
      <td >{{people.name}}</td>
      <td >{{people.age}}</td>
      <td>{{people.sex}}</td>
    </tr>
  </table>
  </div>

</body>

<style>
  td{
    text-align:center;
  }
</style>
  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  <script>
   //创建Vue实例,得到 ViewModel
   var app = new Vue({
    el: '#app',
    data: {
      message:'学生信息',
     title:['序号','姓名','年龄','性别'],
     data:[{id:1,name:'李明', age:25,sex:'男'}, 
           {id:2,name:'张曼玉',age:23,sex:'女'},
           {id:3,name:'刘宏伟',age:28,sex:'男'},
           {id:4,name:'小王',age:30,sex:'男'}
     ]
    },/*数据*/
    mounted(){},/*自动加载函数*/
    methods: {},/*执行触发函数*/
    computed: {},/*动态计算属性*/
   });
  </script>
</html>

2.效果图如下
在这里插入图片描述

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

Element UI组件介绍

简介element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。1、安装Element UI，通过vue脚手架创建项vue init webpack element(项目名)2、在vue脚手架项目中安装elementui# 1.下载elementui的依赖npm i element-ui -S# 2.指定当前项目中使用elementuiimport