一、$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. [三边定位] C# 演示程序

    计划用CC2530做定位,网上找了一些求圆交点的程序, 修改成3个圆求交点的质心,感觉算法还行. 粗略写了一下程序,结果还行. 现在只能手动输入3个圆的信息. 后面需要再优化. 全部未优化的程序: u ...

  2. sql面试题-----行转列

    tem数据表如下图 select Time as 日期, sum ( case end ) as 胜, sum ( case end ) as 负 from tem group by Time 执行结 ...

  3. Macbook Pro安装Office 2016 for mac

    折腾了半天终于弄好了…… 工具:office2016安装包,MSO15.11.2Patch(破解脚本),Xcode office2016安装包百度网盘下载:http://pan.baidu.com/s ...

  4. 多个ip以逗号分隔

    /^(((?:(?:1[0-9][0-9]\.)|(?:2[0-4][0-9]\.)|(?:25[0-5]\.)|(?:[1-9][0-9]\.)|(?:[0-9]\.)){3}(?:(?:1[0-9 ...

  5. centos安装谷歌浏览器

    第一步: 切换到root权限 su root 或者 sudo -i 第二步: 下载新的软件源: 进入到 cd /etc/yum.repos.d 然后 wget http://people.centos ...

  6. poj2393 Yogurt factory（贪心，思考）

    https://vjudge.net/problem/POJ-2393 因为仓储费是不变的. 对于每一周,要么用当周生产的,要么接着上一周使用的价格(不一定是输入的)加上固定的仓储费用. 应该算是用到 ...

  7. SharePoint Excel Service - Couldn't Open the Workbook.

    Error meesage: "Couldn't Open the Workbook. Wow, That's a big workbook. Unfortunately, we can't ...

  8. Docker 安装和基础用法

    理解Docker(1):Docker 安装和基础用法 本系列文章将介绍Docker的有关知识: (1)Docker 安装及基本用法 (2)Docker 镜像 (3)Docker 容器的隔离性 - 使用 ...

  9. DockerSwarm获取Token与常用命令

    一.Token相关 Join tokens是允许一个节点加入集群的密钥.有两种可用的不同的join tokens,一个是用作worker角色,另一个是用作manager角色.在执行swarm join ...

  10. C# System.IO.StreamReader

    实现一个 TextReader,使其以一种特定的编码从字节流中读取字符. using System; using System.IO; class Test { public static void ...