vue- 列表

总结：
1.vue监视data所有层次的数据

2. 如何检测对象中的数据：
通过setter监视，且要在new vue 的时候就传入检测的数据
（1）对象中追加的属性，Vue不做响应式处理
（2）后添加的需要做响应式的话
Vue.set(target,propertyName/index,val)
vm.$set(target,propertyName/index,val)

3.如何检测数组中数据的变化
通过包裹数组更新方法实现，本质就是
（1）调佣原生方法对数组进行更新
（2）重新解析模板，更新页面

4.vue修改数组使用如下方法：
1.push(),pop(),shift(),unshift(),splice(),sort(),reverse()
2.Vue.set() vm.$set()

特别注意：Vue.set() vm.$set()不能给vm和vm的跟数据添加属性

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>


  <div id="demo">
    <button @click="student.age++">年龄+1</button><br/>
    <button @click="addSex">添加属性性别，默认男</button><br/>
    <button @click="addFriend">在列表首位添加一个朋友</button><br/>
    <button @click="updateFirstFriendName">修改第一个朋友的名字</button><br/>
    <button @click="addHobby">添加一个爱好</button><br/>
    <button @click="updateHobby">更新第一个爱好</button><br/>


    <h1>学生信息</h1>
    <h2>姓名：{{student.name}}</h2>
    <h2>年龄：{{student.age}}</h2>
    <h2>性别：{{student.sex}}</h2>
    <h2>爱好</h2>
    <ul>
      <li v-for="(h,index) in student.hobby" :key="index">
        {{h}}
      </li>
    </ul>
    <h2>朋友</h2>
    <h2></h2>
    <ul>
      <li v-for="(f,index) in student.friends" :key="index">
        {{f.name}}-{{f.age}}
      </li>
    </ul>


  </div>

  <script type="text/javascript">
      new Vue({
        el:'#demo',
        data:{
          student:{
            name:'tom',
            age:18,
            hobby:['篮球','游戏','学习'],
            friends:[
              {name:'steven',age:18},
              {name:'lili',age:20}
            ]
          }
        },methods:{
          addSex(){
            Vue.set(this.student,'sex','男')
          },
          addFriend(){
            //在列表首位添加一个朋友
            this.student.friends.unshift({name:'abs',age:19})
          },
          updateFirstFriendName(){
            this.student.friends[0].name = '修改'
          },
          addHobby(){
            //push向数组最后添加
            this.student.hobby.push('睡觉')
          },
          updateHobby(){
            //从第0个开始删除删1个，然后插入一个做饭
            //this.student.hobby.splice(0,1,'做饭')
            //操作hobby，将第0个变成做饭
            this.$set(this.student.hobby,0,'做饭')
          }
        }
      })
  </script>
</body>
</html>

　　


————————————————
版权声明：本文为CSDN博主「人生海海~」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/lihuihui01/article/details/122906502

posted @ 2022-05-26 14:09  春天又来了  阅读(230)  评论(0)    收藏  举报