| 123456789101112131415161718192021222324252627282930313233343536373839404142 |
- <!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>{{msg}}</h1>
- <h2>用户姓名{{person.name}}</h2>
- <h2>用户年龄{{person.age}}</h2>
- <h2>用户性别{{person.sex}}</h2>
- <button @click="addAttr">
- 添加属性
- </button>
- </div>
- <script>
- new Vue({
- el: '#app',
- data: {
- msg: 'hello vue',
- person:{
- name:'张三',
- age:18
- }
- },
- methods:{
- addAttr(){
- // vue2 中添加属性 没有响应式效果
- // this.person.age = 20;
- // this.person.sex='男'
- // vue2 中添加属性 可以使用set方法添加
- Vue.set(this.person,'sex','男')
- // set 中 第一个参数是要修改的对象 第二个参数是要添加属性名 第三个参数是属性值
- }
- }
- })
- </script>
- </body>
- </html>
|
