Vue技术12.6总结Vue数据监测

DOCTYPE html>>
<html>
    <head>
        <mata charset="UTF-8"/>
        <title>总结Vue数据监测title>
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        
        <div id="root">
         <h1>学生信息h1>
         <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="updateFriendName">修改第一个朋友的名字为:张三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>
    body>

    <script type="text/javascript">
        Vue.config.productionTip = false

        const vm = new Vue({
            el:'#root',
            data:{
                student:{
                    name:'tom',
                    age:18,
                    hobby:['抽烟','喝酒','烫头'],
                    friends:[
                        {name:'jerry',age:35},
                        {name:'tory',age:36}
                    ]
                }
                
            },
            methods:{
                addSex(){
                    //Vue.set(this.student,'sex','男')
                    this.$set(this.student,'sex','男')
                },
                addFriend(){
                    this.student.friends.unshift({name:'jack',age:70})
                },
                updateFriendName(){
                    this.student.friends[0].name = '张三'
                },
                addHobby(){
                    this.student.hobby.push('学习')
                },
                updateHobby(){
                   // this.student.hobby.splice(0,1,'开车')
                   Vue.set(this.student.hobby,0,'开车')
                }
            }

        })
    script>
html>

你可能感兴趣的:(前端,vue.js,javascript,前端)