lovecoding
/
web0715


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
							<!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">
        <ul>
          <li v-for="(item,index) in arr" :key="index">
            {{index+1}}-我叫{{item.name}}--今年{{item.age}}--是一个{{item.sex}}孩
          </li>
        </ul>
        <button v-on:click="changeDate">修改第二条数据</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        var app = new Vue({
         data:{
            arr: [
            {
              name: "LiLi",
              age: 10,
              sex: "女",
            },
            {
              name: "John",
              age: 17,
              sex: "男",
            },
            {
              name: "Lucy",
              age: 22,
              sex: "女",
            },
            {
              name: "Jack",
              age: 20,
              sex: "男",
            },
            {
              name: "孙悟空",
              age: 33,
              sex: "男",
            },
            {
              name: "猪八戒",
              age: 30,
              sex: "男",
            },
          ],
         },
         methods:{
            changeDate() {
                console.log("触发")
                // this.arr[1].sex = '女'
                // this.arr[1] = { name:'林黛玉',age:6,sex:'女'}
                // 数据更新
                // 视图不变
                // Vue2.0 => 响应式框架 
                // MVVM => Object.defineProperty getter和setter 
                console.log(this.arr,'arr')
                // Vue.set(target,index/name,newValue)
                Vue.set(this.arr,1,{ name:'林黛玉',age:6,sex:'女'})
                // this.$set(this.arr,1,{ name:'林黛玉',age:6,sex:'女'})
            }
         }
         
        }).$mount("#app");
    </script>
</body>
</html>