一、$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.4515.[SDOI2016]游戏(树链剖分 李超线段树)

    BZOJ 洛谷 每次在路径上加的数是个一次函数,容易看出是树剖+李超线段树维护函数最小值.所以其实依旧是模板题. 横坐标自然是取个确定的距离标准.取每个点到根节点的距离\(dis[i]\)作为\(i\ ...

  2. Idea创建一个springboot多模块项目

    一.创建空Maven项目 二.左边选择maven,右边可以什么不选,直接next: 三.填写artifactId,点击next直到finish 四.finish后,idea会生成如下结果模块,删除sr ...

  3. vue动态切换视图

    big.vue <template> <div> big <p>{{view}}</p> <!--标准规范--> <component ...

  4. NodeJS Stream流

    NodeJS Stream流 流数据在网络通信中至关重要,nodeJS用Stream提供了一个抽象接口,node中有很多对象实现了这个接口,提供统一的操作体验 基本流类型 NodeJS中,Stream ...

  5. JS_高程4.变量，作用域和内存问题（2）执行环境及作用域

    1.执行环境:执行环境定义了变量或函数有权访问的其他数据,决定了它们各自的行为, 每个执行环境都有一个与之相关联的变量对象,环境中定义的所有变量和函数都保存在这个对象中. 2.全局执行环境: 最外围的 ...

  6. __c语言__测一段代码的运行时间

    2017-09-16 13:35:56 感觉很实用. /************************************** time ./a.out 命令所花费的real时间.user时间和 ...

  7. Jetpack 架构组件 Room 数据库 ORM MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  8. Initialize a vector in C++ (5 different ways)

    https://www.geeksforgeeks.org/initialize-a-vector-in-cpp-different-ways/ Following are different way ...

  9. 一步步教你轻松学朴素贝叶斯模型算法Sklearn深度篇3

    一步步教你轻松学朴素贝叶斯深度篇3(白宁超   2018年9月4日14:18:14) 导读:朴素贝叶斯模型是机器学习常用的模型算法之一,其在文本分类方面简单易行,且取得不错的分类效果.所以很受欢迎,对 ...

  10. 读取PBOC电子现金指令流

    该指令流仅适用于T=0协议卡片.   终端对IC卡的响应: 60 须要额外的工作等待时间,说明IC卡端数据还未处理好. 61 发送GET RESPONSE命令取应答数据 6C 加上取字节数,命令重发 ...