|
|
@@ -0,0 +1,57 @@
|
|
|
+<!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>
|
zsydgithub