vue-vue实例方法(数据)

一、简介

vue实例方法（数据）包括3个：vm.$set()、vm.$watch()、vm.$delete()。

分类 vue实例方法名称 方法用户 备注说明
数据 vm.$set(object,key,value)  为对象object添加属性key，并指定属性值value  
vm.$delete(object,key)  删除对象的属性key  
vm.$watch(data,callback[,options])  观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。  

二、vue实例方法（数据）

1、vm.$set(object，key，value)   为对象object添加属性key，并指定属性值value

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue实例方法(数据)</title>
  <!--引入vue-->
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id="hello">
    <h1>{{user.name}}</h1>
    <h2>{{user.age}}</h2>
    <button @click='doUpdate'>修改属性值</button>
    <button @click='doAdd'>添加属性</button>
  </div>

  <script>
    let vm = new Vue({

        el:'#hello',  

        data:{  
          user:{
            id:1001,
            name:'monica'
          }
        },

        methods:{
          doUpdate(){
            this.user.name='Pheen';
          },

          //vue实例方法(数据)
          //vm.$set(object,key,value) 为对象object添加属性名key设置属性值value（见方式2）
          doAdd(){
            //方式1 通过普通方式为对象添加属性,vue无法实时监视到。
            //this.user.age=20; 

            //方式2 通过vue实例的vm.$set方法为对象添加属性,vue可以实时监视。(推荐)
            //this.$set(this.user,'age',20);

            //方式3 通过全局API方法Vue.set方法为对象添加属性,vue可以实时监视。(推荐)
            //Vue.set(this.user,'age',20);

            console.log(this.user);

            //一般会先判断对象中是否有age属性，如果有age属性，则age加1岁，如果没有age属性，则添加age属性，并把age的值设为1
            if(this.user.age){
              this.user.age++;
            }else{
              vm.$set(this.user,'age',1)
            }
          },
        }
      });

  </script>
</body>
</html>

 

2、vm.$delete(object，key)   删除对象object的属性key

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>vue实例方法(数据)</title>
 6   <!--引入vue-->
 7   <script src="../js/vue.js"></script>
 8 </head>
 9 
10 <body>
11   <div id="hello">
12     <h1>{{user.name}}</h1>
13     <h2>{{user.age}}</h2>
14     <button @click='doDelete'>删除属性</button>
15   </div>
16   <script>
17     let vm = new Vue({
18         el:'#hello',  
19         data:{  
20           user:{
21             id:1001,
22             name:'monica'
23           }
24         },
25           //vue实例方法(数据)
26           //vm.$delete(object,key) 删除对象object的属性key
27           doDelete(){
28             //先判断要删除的属性是否存在，如果存在就删除，如果不存在提示
29 
30             //删除对象的属性
31             if(this.user.age){
32               //写法1 使用vm.$delete删除对象的属性
33               //vm.$delete(this.user,'age')
34               //写法2 使用Vue.delete()全局API方法删除对象的属性
35               Vue.delete(this.user,'age')
36             }else{
37               alert('属性不存在')
38             }
39           },
40         }
41       });
42 
43   </script>
44 </body>
45 </html>

 

3、vm.$watch(data,callback,[options])   观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。

a.监视变量name和age的结果变化

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>vue实例方法(数据)</title>
 6   <!--引入vue-->
 7   <script src="../js/vue.js"></script>
 8 </head>
 9 
10 <body>
11   <div id="hello">
12     <h1>{{name}}</h1>
13     <input type="text" v-model='name'>
14     <h1>{{age}}</h1>
15     <input type="text" v-model='age'>
16     <h1>{{user.name}}</h1>
17     <input type="text" v-model='user.name'>
18   </div>
19   <script>
20     let vm = new Vue({
21         el:'#hello',  
22         data:{  
23             name:'monica',
24             age:20,
25             user:{
26               name:'alice'
27             }
28         },
29 
30 
31         //方式2 使用vm提供的watch选项
32         watch:{
33           age:function(newVal,oldVal){
34             console.log('我监视到age被修改了','age原值：'+oldVal,'age新值：'+newVal)  //age的新值和旧值不一样
35           },
36         }  
37       });
38 
39     //1、监视name的改变，并记录原值和新值。有两种实现方式：
40 
41     //方式1 使用vm.$watch()方法
42     vm.$watch('name',function(newVal,oldVal){
43       console.log('我监视到name被修改了','name原值：'+oldVal,'name新值：'+newVal) //name的新值和旧值不一样
44     });
45 
46   </script>
47 </body>
48 </html>

 

b.监视对象user中name属性的结果变化

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>vue实例方法(数据)</title>
 6   <!--引入vue-->
 7   <script src="../js/vue.js"></script>
 8 </head>
 9 
10 <body>
11   <div id="hello">
12     <h1>{{user.name}}</h1>
13     <input type="text" v-model='user.name'>
14   </div>
15   <script>
16     let vm = new Vue({
17         el:'#hello',  
18         data:{  
19             user:{
20               name:'alice'
21             }
22         },
23 
24         //方式2 使用vm提供的watch选项
25         watch:{
26           //监视对象user的属性name的改变。使用深度监视的方式
27           // user:{
28           //   handler:(newVal,oldVal)=>{
29           //     console.log('我监视到user对象中的name被修改了','user对象中的name原值：'+oldVal.name,'user对象中的name新值：'+newVal.name)  //user.name的新值和旧值一样，对象是指针存储
30           //   },
31           //   deep:true //深度监视
32           // },
33         }  
34       });
35 
36     //2、监视user对象中的name
37     //方式1 使用vm.$watch()方法
38     vm.$watch('user',function(newVal,oldVal){
39       console.log('我监视到user对象中的name被修改了','user对象中的name原值：'+oldVal.name,'user对象中的name新值：'+newVal.name) //user.name的新值和旧值一样，对象是指针存储
40     },{deep:true});
41 
42   </script>
43 </body>
44 </html>

 

posted @ 2021-08-27 11:36  AnnLing  阅读(190)  评论(0)    收藏  举报