目录

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>
本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
0白露14 分钟前
Apifox Helper 与 Swagger3 区别
开发语言
Tanecious.1 小时前
机器视觉--python基础语法
开发语言·python
叠叠乐1 小时前
rust Send Sync 以及对象安全和对象不安全
开发语言·安全·rust
战族狼魂2 小时前
CSGO 皮肤交易平台后端 (Spring Boot) 代码结构与示例
java·spring boot·后端
Tttian6223 小时前
Python办公自动化(3)对Excel的操作
开发语言·python·excel
xyliiiiiL3 小时前
ZGC初步了解
java·jvm·算法
杉之3 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
hycccccch4 小时前
Canal+RabbitMQ实现MySQL数据增量同步
java·数据库·后端·rabbitmq
独好紫罗兰4 小时前
洛谷题单2-P5713 【深基3.例5】洛谷团队系统-python-流程图重构
开发语言·python·算法
天天向上杰5 小时前
面基JavaEE银行金融业务逻辑层处理金融数据类型BigDecimal
java·bigdecimal