一、$set

在开始讲解$set之前先看下面的一段代码，实现的功能：当点击“添加”按钮时，动态的给data里面的对象添加属性和值，代码示例如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>添加属性</title>

    <!--引入vue.js-->

    <script src="node_modules/vue/dist/vue.js" ></script>

    <script>

        window.onload=function(){

            new Vue({

                el:'#app',// 2.0不允许挂载到html,body元素上

                data:{

                    info:{id:1,price:15,name:"套餐A"}

                },

                methods:{

                    add:function(){

                        // 给info对象添加msg属性并赋值

                        this.info.msg="hello";

                    }

                }

            });

        }

    </script>

</head>

<body>

    <div id="app">

        {{info.msg}}

        <button @click="add">添加</button>

    </div>

</body>

</html>

先看看点击按钮之前的效果：

从截图中可以看出这时info对象只有三个属性，点击“添加”按钮刷新，然后在看看info对象的属性，截图如下：

可以看出这时info对象增加了msg属性，但是界面上面没有显示出来msg属性的值。即：

如果在实例创建之后添加新的属性到实例上，不会触发视图更新。

这时就需要使用$set了。代码示例如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>添加属性</title>

    <!--引入vue.js-->

    <script src="node_modules/vue/dist/vue.js" ></script>

    <script>

        window.onload=function(){

            new Vue({

                el:'#app',// 2.0不允许挂载到html,body元素上

                data:{

                    info:{id:1,price:15,name:"套餐A"}

                },

                methods:{

                    add:function(){

                        // 给info对象添加msg属性并赋值

                        //this.info.msg="hello";

                        this.$set(this.info,"msg","hello");

                    }

                }

            });

        }

    </script>

</head>

<body>

    <div id="app">

        {{info.msg}}

        <button @click="add">添加</button>

    </div>

</body>

</html>

效果：

可以看出：使用了$set之后视图会被更新。

注意：如果是修改对象里面已经存在的属性，则直接修改即可

代码示例如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>添加属性</title>

    <!--引入vue.js-->

    <script src="node_modules/vue/dist/vue.js" ></script>

    <script>

        window.onload=function(){

            new Vue({

                el:'#app',// 2.0不允许挂载到html,body元素上

                data:{

                    info:{id:1,price:15,name:"套餐A"}

                },

                methods:{

                    add:function(){

                        // 给info对象添加msg属性并赋值

                        //this.info.msg="hello";

                        this.$set(this.info,"msg","hello");

                    },

                    modify:function(){

                        this.info.name="套餐B";

                    }

                }

            });

        }

    </script>

</head>

<body>

    <div id="app">

        {{info.msg}}

        name值：{{info.name}}

        <button @click="add">添加</button>

        <button @click="modify">修改</button>

    </div>

</body>

</html>

效果：

二、$delete删除对象属性

可以使用$delete删除对象里面的属性，代码示例如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>添加属性</title>

    <!--引入vue.js-->

    <script src="node_modules/vue/dist/vue.js" ></script>

    <script>

        window.onload=function(){

            new Vue({

                el:'#app',// 2.0不允许挂载到html,body元素上

                data:{

                    info:{id:1,price:15,name:"套餐A"}

                },

                methods:{

                    add:function(){

                        // 给info对象添加msg属性并赋值

                        //this.info.msg="hello";

                        this.$set(this.info,"msg","hello");

                    },

                    modify:function(){

                        this.info.name="套餐B";

                    },

                    del:function(){

                        // 删除info对象里面的price属性

                        this.$delete(this.info,"price");

                    }

                }

            });

        }

    </script>

</head>

<body>

    <div id="app">

        {{info.msg}}

        name值：{{info.name}}

        <button @click="add">添加</button>

        <button @click="modify">修改</button>

        <button @click="del">删除</button>

    </div>

</body>

</html>

效果：

Vue：$set和$delete的更多相关文章

  1. 如何区别数据库删除语句drop与delete与truncate？

    1.delete:删除数据表中的行(可以删除某一行,也可以在不删除数据表的情况下删除所有行) 删除某一行:delete from 数据表名称 where 列名称=值: 删除所有行:delete*fro ...

  2. 数据库设计中的Soft Delete模式

    最近几天有点忙,所以我们今天来一篇短的,简单地介绍一下数据库设计中的一种模式——Soft Delete. 可以说,该模式毁誉参半,甚至有非常多的人认为该模式是一个Anti-Pattern.因此在本篇文 ...

  3. 关于JavaScript中的delete操作

    关于JavaScript中的delete操作 看到一道题,是这样的: (function(x){ delete x; return x; })(1); 1 null undefined Error 我 ...

  4. Git异常：Cannot delete the branch 'test1' which you are currently on

    GitHub实战系列汇总:http://www.cnblogs.com/dunitian/p/5038719.html ———————————————————————————————————————— ...

  5. HTTP Method详细解读(`GET` `HEAD` `POST` `OPTIONS` `PUT` `DELETE` `TRACE` `CONNECT`)

    前言 HTTP Method的历史: HTTP 0.9 这个版本只有GET方法 HTTP 1.0 这个版本有GET HEAD POST这三个方法 HTTP 1.1 这个版本是当前版本,包含GET HE ...

  6. IIS7.5上的REST服务的Put,Delete操作发生HTTP Error 405.0 - Method Not Allowed 解决方法

    WebDAV 是超文本传输协议 (HTTP) 的一组扩展,为 Internet 上计算机之间的编辑和文件管理提供了标准.利用这个协议用户可以通过Web进行远程的基本文件操作,如拷贝.移动.删除等.在I ...

  7. ASP.NET Core 中文文档 第二章 指南（4.10）检查自动生成的Detail方法和Delete方法

    原文 Examining the Details and Delete methods 作者 Rick Anderson 翻译 谢炀(Kiler) 校对 许登洋(Seay).姚阿勇(Mr.Yao) 打 ...

  8. new/delete重载

    在c++中,有时我们需要在运行阶段为一个变量分配未命名的内存,并使用指针来访问它,这里就可以用到new关键字.另外需要指出的是,new分配的内存块通常与常规变量分配的内存块不同,常规变量的值都储存在被 ...

  9. EC笔记：第三部分：16成对使用new和delete

    我们都知道,申请的资源,使用完毕后要释放.但是这个释放动作,一定要注意. 举个例子,很多人动态分配的资源,在使用之后,往往直接调用了delete,而不管申请资源的时候用的是new还是new[]. 如下 ...

  10. Spring boot: Request method 'DELETE' not supported， Request method 'PUT' not supported， Request method 'POST' not supported

    GET,POST,PUT,DELETE, Spring都支持,不要怀疑Spring, 一定是前端发送的rest 请求和后端的响应不匹配, 查找原因以及解决办法, 很简单 用chrome打开F12控制台 ...

随机推荐

  1. BZOJ.5251.[八省联考2018]劈配mentor(最大流)

    BZOJ 洛谷 对于每个人,每次枚举一个志愿看是否能增广即可. 对于第二问,可以保留第一问中\(n\)次增广前后的\(n\)张图,二分,在对应图上看是否能增广即可. 貌似匈牙利的某种写法比网络流优多了 ...

  2. BZOJ.3504.[CQOI2014]危桥(最大流ISAP)

    BZOJ 洛谷 这种题大多是多源多汇跑网络流.往返\(a_n/b_n\)次可以看做去\(a_n/b_n\)次,直接把危桥能走的次数看做\(1\). 先不考虑别的,直接按原图建模:危桥建双向边容量为\( ...

  3. 面试知识点——Java

    目录 Java容器 hashmap实现原理 java多线程 jvm内存模型 java 垃圾回收机制 对象存活状态检查 垃圾收集算法 垃圾收集器 内存分配与回收策略 java nio Java容器 ha ...

  4. BZOJ4867 : [Ynoi2017]舌尖上的由乃

    首先通过DFS序将原问题转化为序列上区间加.询问区间kth的问题. 考虑分块,设块大小为$K$,每块维护排序过后的$pair(值,编号)$. 对于修改,整块的部分可以直接打标记,而零碎的两块因为本来有 ...

  5. hdu 6034 B - Balala Power! 贪心

    B - Balala Power! 题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=6034 题面描述 Talented Mr.Tang has n st ...

  6. jmeter接口测试实例4-学生金币充值

    Jmeter实例4:学生金币充值 添加http协议—添加IP.路径.方法,添加cookie管理器,察看结果树如下图所示 输入管理员名称:niuhanyang,输入值,域,如下图所示: 输入必填参数,运 ...

  7. es6学习笔记一：迭代器和for-of循环

    我们如何遍历一个数组呢?在20年前,我们是这样遍历一个数组的: var myArr = []; for (var i = 0; i < arr.length; i++) { console.lo ...

  8. 本地文件上传GitHub

    (1)mkdir 项目名称(2)cd  项目名称(3)git init 把它变成可管理的Git仓库(4)git status 查看状态(5)git add . 点用空格隔开(6)git status ...

  9. sql 2008 查询性能优化笔记

    索引: set statistics io on select p.productID,p.name,p.Weight,p.StandardCost from production.product p ...

  10. HTML 回顾整理

    <html>标签:定义HTML文档 <body>标签:定义文档主体 <h1> - <h6> 标签:定义HTML标题 <hr> 标签:创建水平 ...