通过vue完成表格数据的渲染展示和vue的生命周期及小结

案例

通过vue完成表格数据的渲染展示

把视图区展示的数据 死数据替换掉

从vue的数据模型中读取 展示在视图区

vue中的数据 模型是js中的自定义类型 形成的数组

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue案例</title>
  <!--引入 vue 的标签-->
  <script src="js/vue.js"></script>
</head>
<body>
  <!--定义视图层的展示区域-->
  <div id="app">

    <table border="1" cellspacing="0" width="60%">
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>成绩</th>
      <th>等级</th>
    </tr>
    
    <!--在第二个 tr 上加上指令-->
    <tr align="center" v-for="(user,index) in users">
      <td>{{index+1}}</td>
      <td>{{user.name}}</td>
      <td>{{user.age}}</td>
      <td>
        <span v-if="user.gender==1">男</span>
        <span v-if="user.gender==2">女</span>
      </td>
      <td>{{user.score}}</td>
      <td>
        <span v-if="user.score>=85">优秀</span>
        <span v-else-if="user.score>=60">良好</span>
        <span style="color: red;" v-else>不及格</span>
      </td>
    </tr>

  </table>
  </div>
  
</body>
<script>
    //定义 vue 对象
    //将 vue 中的数据模型遍历展示在视图层的表格中
   new Vue({
      el:"#app",//vue 接管 的区域
      //定义数据模型
      data:{
        users:[{
          name:"Tom",
          age:20,
          gender:1,
          score:78,
        },{
          name:"Rose",
          age:18,
          gender:2,
          score:86,
        },{
          name:"Jerry",
          age:26,
          gender:1,
          score:90,
        },{
          name:"Tony",
          age:30,
          gender:1,
          score:52,
        }]
      },
      //定义函数
      methods:{
        
      }
   })

</script>
</html>

生命周期

一个对象从创建到销毁的全部过程

知道了vue的生命周期后

我们可以在指定的生命周期内完成对应的任务

我们主要是学习mounted这个生命周期

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue案例</title>
  <!--引入 vue 的标签-->
  <script src="js/vue.js"></script>
</head>
<body>
  <!--定义视图层的展示区域-->
  <div id="app">

  
  </div>
  
</body>
<script>
    //定义 vue 对象
    //将 vue 中的数据模型遍历展示在视图层的表格中
   new Vue({
      el:"#app",//vue 接管 的区域
      //定义数据模型
      data:{
       
      },
      //定义函数
      methods:{
        
      },
      //定义 vue 生命周期的方法
      //在 vue 生命周期中是自动调用 不需要我们启动
      mounted (){
        alert("vue 挂载完成 发送请求到服务端");
      }
   })

</script>
</html>

mounted

挂载成功 Vue初始化成功 HTML页面渲染成功

发送请求到服务端 加载数据

小结

相关推荐
IT_陈寒16 分钟前
Python开发者必看:这5个鲜为人知的Pandas技巧让你的数据处理效率提升50%
前端·人工智能·后端
豆苗学前端24 分钟前
写给女朋友的第一封信,测试方法概论
前端·后端·设计模式
半桶水专家41 分钟前
Vue 3 插槽(Slot)详解
前端·javascript·vue.js
袁煦丞42 分钟前
本地AI绘画神器+全局访问——Stable Diffusion WebUI 成功突破:cpolar内网穿透实验室第462个成功挑战
前端·程序员·远程工作
一枚前端小能手42 分钟前
🏗️ JavaScript类深度解析 - 从构造函数到现代特性的完整指南
前端·javascript
袁煦丞1 小时前
家用NAS+云盘自由NanoPi R4S+iStoreOS:cpolar内网穿透实验室第460个成功挑战
前端·程序员·远程工作
浏览器API调用工程师_Taylor1 小时前
日报自动化实战:告别手动复制粘贴
前端·javascript·node.js
晴殇i1 小时前
JavaScript还能这样写?!ES2025新语法让代码优雅到极致
前端·javascript·程序员
浏览器API调用工程师_Taylor1 小时前
我是如何将手动的日报自动化的☺️☺️☺️
前端·javascript·爬虫
东哥很忙XH2 小时前
flutter开发的音乐搜索app
android·javascript·flutter