| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 |
- <!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>
- </head>
- <body>
- <div id="app">
- <button @click="change">修改</button>
- <ul>
- <li v-for="(val,index) in arr">
- {{val}}
- {{index}}
- </li>
- </ul>
- </div>
- <script src="vue.js"></script>
- <script>
- /*
- Vue中 直接修改数组的索引 是没有办法驱动视图更新的
- 因为Vue不能检测到数组索引的变动
- Vue.set(data数据，修改值的索引，修改的参数)
- Vue要大写
- Vue提供的一个全局的方法 用于向响应式对象中添加一个属性 并且确保这个新属性也是响应式的
- Vue.set = this.$set
- push() pop() shift() unshift() splice() sort() reverse()
- Vue重写的方法 用来实现响应式更新
- */
- var app = new Vue({
- el: '#app',
- data: {
- arr: ['a','b','c','d'],
- person: {
- name:'zs',
- age: 18
- }
- },
- methods: {
- change(){
- // this.arr[0] = 'x'
- // console.log(1)
- // Vue.set(this.arr,0,'x')
- // this.$set(this.arr,0,'x')
- // this.person.name = 'lisi'
- // Vue.set(this.person,'name','lisi')
- this.arr.splice(0,1,'x')
- }
- }
- })
- </script>
- </body>
- </html>
|
