Vue0-生命周期-03

生命周期

生命周期指定就是一个对象从创建到销毁的整个过程。

Vue也是有的

完整的Vue周期包含8个阶段。

Vue官方生命周期流程图:

那这有什么用呢?我们可以在指定阶段做特殊的事件。

这些方法伴随生命周期的进行自动执行。

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>
    <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 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-else-if="user.gender==2">女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-show="user.score >= 85">优秀</span>
                    <span v-show="user.score > 60 && user.score < 85">及格</span>
                    <span style="color: red;" v-show="user.score < 60">不及格</span>
                </td>
            </tr>
        </table>

    </div>
</body>
<script>
    new Vue({
        el:"#app",
        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:{
            
        },
        mounted(){
            alert("挂载完成");
        }
        
    })
</script>
</html>
相关推荐
喵手1 小时前
玩转Java网络编程:基于Socket的服务器和客户端开发!
java·服务器·网络
再见晴天*_*2 小时前
SpringBoot 中单独一个类中运行main方法报错:找不到或无法加载主类
java·开发语言·intellij idea
lqjun08273 小时前
Qt程序单独运行报错问题
开发语言·qt
hdsoft_huge5 小时前
Java & Spring Boot常见异常全解析:原因、危害、处理与防范
java·开发语言·spring boot
风中的微尘5 小时前
39.网络流入门
开发语言·网络·c++·算法
雨白6 小时前
Java 多线程指南:从基础用法到线程安全
android·java
Hungry_Shark6 小时前
IDEA版本控制管理之使用Gitee
java·gitee·intellij-idea
赛姐在努力.6 小时前
《IDEA 突然“三无”?三秒找回消失的绿色启动键、主菜单和项目树!》
java·intellij-idea
未来之窗软件服务6 小时前
幽冥大陆(二)RDIFSDK 接口文档:布草洗涤厂高效运营的技术桥梁C#—东方仙盟
开发语言·c#·rdif·仙盟创梦ide·东方仙盟
猎板PCB黄浩6 小时前
从废料到碳减排:猎板 PCB 埋容埋阻的绿色制造革命,如何实现环保与性能双赢
java·服务器·制造