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