Vue的监测数据改变的原理_数组

最新推荐文章于 2024-04-04 10:25:08 发布

前端程序员路易

最新推荐文章于 2024-04-04 10:25:08 发布

阅读量238

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_46582421/article/details/121363553

版权

vue 专栏收录该内容

60 篇文章 0 订阅

订阅专栏

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue的监测数据改变的原理_数组</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <link rel="shortcut icon" href="../ico—全图标/application/dd.ico" type="image/x-icon">
</head>
<body>
    <div id="root">
        <h1>学校信息</h1>
        <h2>学校名称：{{school.name}}</h2>
        <h2>学校地址：{{school.address}}</h2>
        <h2>校长：{{school.leader}}</h2>
        <hr>
        <h1>学生信息</h1>
        <button @click="addSex">添加一个性别属性，默认值是男</button>
        <h2>学生名字：{{student.name}}</h2>
        <h2 v-if="student.sex">学生性别：{{student.sex}}</h2>
        <h2>学生年龄：真实年龄{{student.age.rAge}},人前年龄{{student.age.sAge}}</h2>
        <h1>爱好</h1>
        <ul>
            <li v-for="(h,index) in student.hobby" :key="index">
                {{h}}
            </li>
        </ul>
    </div>

    <script>
        
        Vue.config.productionTip = false

        const vm = new Vue({
            el:'#root',
            data:{
                school:{
                    name:'清华',
                    address:'北京',
                },
                student:{
                    name:'louie',
                    age:{
                        rAge:23,
                        sAge:19,
                    },
                    hobby:['抽烟','喝酒'],
                    friends:[
                        {name:'Max',age:33},
                        {name:'SS',age:54}
                    ]
                }
            },
            methods: {
                addSex(){
                    // Vue.set(this.student,'sex','男')
                    this.$set(this.student,'sex','男')

                }
            }
            
        })
    
    </script>
</body>
</html>

结果：
在这里插入图片描述

前端程序员路易

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的监测数据改变的原理_数组

代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt
复制链接

扫一扫

专栏目录