| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <script src="./js/vue.js"></script>
- </head>
- <body>
- <div id="app">
- <!-- <h1 v-for="item in arr">{{item}}</h1>
- <h1>{{num}}</h1> -->
- <h1>用户名：{{obj.username}}</h1>
- <h1>年龄:{{obj.age}}</h1>
- <h1>性别：{{obj.sex}}</h1>
- <button @click="changeArr"> change </button>
- </div>
- <script>
- let app = new Vue({
- el: '#app',
- data:{
- arr:["a","b","c","d","e"],
- num:0,
- obj:{
- username:"zhangsan",
- age:18
- }
- },
- methods: {
- changeArr:function(){
- // this.arr[0] = "hello";
- // this.arr = [1,2,3,4,5]
- // this.num++;
- // 在vue中修改数组具体某一个值的时候 以及向对象中新增属性的时候 不能直接修改 要用Vue.set方法
- // Vue set 方法 接受三个参数 第一个要求修改的对象或数组 第二个是修改的属性或索引 第三个是修改的值
- // Vue.set(this.arr,0,"hello");
- // this.obj.sex = "男";
- Vue.set(this.obj,"sex","男");
-
- }
- },
- })
- </script>
- </body>
- </html>
|
