Vue之监测数据小练习

最新推荐文章于 2024-09-30 14:28:41 发布

远近高低各不同

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量395

点赞数 9

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_74577714/article/details/136379081

版权

本章是一个小练习，希望可以帮助到大家！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button @click="student.age++">年龄+1</button>
        <button @click="addSex">添加性别属性，默认值：男</button>
        <button @click="addListFirst">在列表首位添加一个朋友</button>
        <button @click="updateFriendFirstName">修改第一个朋友名字为张三</button>
        <button @click="addHobby">添加一个爱好</button>
        <button @click="updateHobby">修改第一个爱好为开车</button>
        <ul>
            <li v-for="(item,index) in student.hobby" :key="index">{{item}}</li>
        </ul>
        <div>学生名字：{{student.name}}</div>
        <div>学生年龄：{{student.age}}</div>
        <div v-if="student.sex">学生性别：{{student.sex}}</div>
        <ul>
            <li v-for="(item,index) in student.friends" :key="index">
                {{item.name}} -- {{item.age}}
            </li>
        </ul>
    </div>
</body>
<script src="/js/vue.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            student: {
                name: "tom",
                age: 18,
                hobby: ["睡觉", "吃饭", "喝酒"],
                friends: [
                    { name: "jerry", age: 35 },
                    { name: "tony", age: 36 }
                ]
            }
        },
        methods: {
            addSex() {
                Vue.set(this.student, "sex", "男")
            },
            addListFirst() {
                this.student.friends.unshift({ name: "李四", age: 40 })
            },
            updateFriendFirstName() {
                this.student.friends[0].name = "张三"
            },
            addHobby() {
                this.student.hobby.push("打游戏")
            },
            updateHobby() {
                this.student.hobby.splice(0, 1, "开车")
            }
        },
    })
</script>

</html>