【Vue2.0学习】— Vue监视数据的原理(四十二)

简介: 【Vue2.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>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>学生信息</h2>
        <button @click="student.age++">年龄+1岁</button><br><br>
        <button @click="addSex">添加属性默认值是男</button><br><br>
        <button @click="student.sex='未知' ">修改性别</button><br><br>
        <button @click="addFriend">在列表的首位添加一个朋友</button><br><br>
        <button @click="updateFriend">修改第一个朋友的名字为张飒</button><br><br>
        <button @click="addhobby">添加一个爱好</button><br><br>
        <button @click="updatehobby">修改第一个爱好为开车</button><br><br>
        <h3>姓名:{{student.name}}</h3>
        <h3>年龄:{{student.age}}</h3>
        <h3 v-if=" student.sex"> 性别:{{student.sex}}</h3>
        <h3>爱好</h3>
        <ul>
            <li v-for="(h,index) in student.hobby" :key="index">{{h}}</li>
        </ul>
        <h3>学生信息</h3>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">{{f.name}}-{{f.age}}</li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                student: {
                    name: '张三',
                    age: 18,
                    hobby: ['抽烟', '喝酒', '烫头'],
                    friends: [{
                        name: '小王',
                        age: 20
                    }, {
                        name: '李四',
                        age: 22
                    }]
                }
            },
            methods: {
                addSex() {
                    this.$set(this.student, 'sex', '男')
                        // Vue.set(this.student, 'sex', '男')
                },
                addFriend() {
                    this.student.friends.unshift({
                        name: 'jack',
                        age: 26
                    })
                },
                updateFriend() {
                    this.student.friends[0].name = '张飒'
                },
                addhobby() {
                    this.student.hobby.push('打球')
                },
                updatehobby() {
                    this.student.hobby.splice(0, 1, '开车')
                }
            }
        })
    </script>
</body>
</html>


目录
打赏
0
0
0
0
24
分享
相关文章
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
139 64
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
2天前
|
vue使用iconfont图标
vue使用iconfont图标
27 1
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
44 1
vue学习第一章
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
32 1
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
39 1
vue学习第四章
vue学习第7章(循环)
欢迎来到瑞雨溪的博客,一名热爱JavaScript和Vue的大一学生。本文介绍了Vue中的v-for指令,包括遍历数组和对象、使用key以及数组的响应式方法等内容,并附有综合练习实例。关注我,将持续更新更多优质文章!🎉🎉🎉
29 1
vue学习第7章(循环)
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
32 1
vue学习第九章(v-model)
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
46 1
vue学习第十章(组件开发)