| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 |
- <!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>
- <script src="../../vue.js"></script>
- </head>
- <body>
- <div id="app">
- <p>{{ msg }}</p>
- <p><button @click="msg = 'hi'">修改msg</button></p>
- <ul>
- <li v-for="l of list" :key="l">{{ l }}</li>
- </ul>
- <button @click="changeList">修改list</button>
- <ul>
- <li v-for="(v, p) of user" :key="p">{{ p }} = {{ v }}</li>
- <button @click="user.name = 'guoguo'">修改name属性为 guoguo</button>
- <!-- 下面直接给对象 添加或者删除 属性时 视图是不会更新的（即非响应式的） -->
- <button @click="user.sex = '男'">新增一个属性sex</button>
- <button @click="delete user.hobby">删除属性hobby</button>
- <!-- 如果对象属性的新增和删除 能是响应式的 要使用Vue提供两个方法： -->
- <!-- Vue.set( target, propertyName/index, value ) | vm.$set() 响应式添加对象属性 -->
- <!-- Vue.delete( target, propertyName/index ) | vm.$delete() 响应式删除对象属性 -->
- <button @click="$set(user, 'sex', '男')">响应式-新增属性sex</button>
- <button @click="$delete(user, 'hobby')">响应式-删除属性hobby</button>
- <button @click="user = {...user, sex: '女'}">
- 新值换旧值实现响应式
- </button>
- </ul>
- </div>
- <script>
- var vm = new Vue({
- data: {
- msg: 'hello', // 针对 基本数据类型， 当值被替换后，Vue是很容易监听到的
- list: [1, 2, 3],
- user: {
- id: 1,
- name: '大侠',
- hobby: ['篮球', '足球'],
- },
- },
- methods: {
- changeList() {
- // 1 下面修改数组 是不会引发视图更新（即非响应式的）
- // this.list[1] = 4; // 非响应式
- // 2 因此 要注意：其一：使用 Vue提供的数组变更方法 才会 引发视图更新。
- /**
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
- * */
- // 下面是响应式的
- // this.list.splice(1, 1, 4);
- // this.list.push(5);
- // 3 因此 要注意：其二：用新数组 替换 旧值 也能引发视图更新
- var newArr = [...this.list]; // 拷贝原list数组
- newArr[1] = 4;
- this.list = newArr;
- },
- },
- }).$mount('#app');
- </script>
- </body>
- </html>
|
