vue.js $set的使用 数组
[javascript] view plain copy
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.js"></script>
<style>
.blue {
color: blue;
}
</style>
</head> <body>
<div id="example-1">
<ul>
<template v-for="item in items">
<li>
{{$index}}.{{ item.msg }} <button v-on:click="f5(item)">vm.items.splice(index, 1)</button> <button v-on:click="f6(item)">vm.remove</button>
</li>
</template>
</ul> <ul>
<li>
<button v-on:click="f1">vm.items[0] = {} 失效</button>
</li>
<li>
<button v-on:click="f2">vm.items.$set(0, { childMsg: 'Changed!'}) </button>
</li>
<li>
<button v-on:click="f3">vm.items.length = 0 失效</button>
</li>
<li>
<button v-on:click="f4">vm.items={}</button>
</li>
</ul>
<div class="blue">
{{$data | json }}
</div>
<pre>
因为 JavaScript 的限制，Vue.js 不能检测到下面数组变化：
直接用索引设置元素，如 vm.items[0] = {}；
修改数据的长度，如 vm.items.length = 0。
</pre>
</div>
<script>
var vm = new Vue({
el: '#example-1',
data: {
items: [{
msg: 'Foo'
}, {
msg: 'Bar'
}, {
msg: 'George'
}]
},
methods: {
f1: function() {
vm.items[0] = {}; // 失效
},
f2: function() {
vm.items.$set(0, {
childMsg: 'Changed!'
}) vm.items.$set(2, {
msg: 'dongtao!'
})
},
f3: function() {
vm.items.length = 0; // 失效
},
f4: function() {
vm.items = {}
},
f5: function(item) {
var index = this.items.indexOf(item) //Search an array for the item
if (index !== -1) {
this.items.splice(index, 1) //Selects a part of an array, and returns the new array
}
},
f6: function(item) {
this.items.$remove(item)
}
} })
</script>
</body> </html>
vue.js $set的使用 数组的更多相关文章
- Vue源码解析之数组变异
力有不逮的对象 众所周知,在 Vue 中,直接修改对象属性的值无法触发响应式.当你直接修改了对象属性的值,你会发现,只有数据改了,但是页面内容并没有改变. 这是什么原因? 原因在于: Vue 的响应式 ...
- 在webpack中配置vue.js
在webpack中配置vue.js 这里有两种在webpack中配置vue.js的方法,如下: 1.在main.js中引入vue的包: index.html: <!DOCTYPE html> ...
- 1- js vue.js
1 js 2 Vue.js
- vue :class 可以接收 字符串 数组 和 对象 对象里面的key值 根据true或false 显示不显示
vue :class 可以接收 字符串 数组 和 对象 对象里面的key值 根据true或false 显示不显示 https://cn.vuejs.org/v2/guide/class-and-sty ...
- vue中使用v-if判断数组长度是出现length报错
在vue中使用v-if判断数组的长度时出现报错 <el-collapse-item :key="index" v-if="data.childrens.length ...
- 初步学习vue.js
vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 响应的数据绑定 Vue.js 的核心是一个响应的数据绑定系统,它让数据与 DOM 保持同 ...
- vue.js之个人总结
1.MVVM模式 MVVM模式(Model-View-ViewModel)的运作如下图: 1)上图解析:ViewModel是Vue.js的核心,它是一个Vue实例.Vue实例是作用于某一个HTML元素 ...
- 初识Vue.js
一 ,什么是Vue.js? vue.js是一套构建用户界面的渐进式框架,它采用自底向上增量开发的设计.(自底向上设计方法是根据系统功能要求,从具体的器件.逻辑部件或者相似系统开始,凭借设计者熟练的技巧 ...
- 一款很便捷很实用的框架——vue.js
Hello,大家好!今天给大家带来一款十分好用的框架--vue.js! Vue.js是一套构建用户界面的渐进式框架.它 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 ...
- 说说VNode节点(Vue.js实现)
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...
随机推荐
- POJ——3169Layout（差分约束）
POJ——3169Layout Layout Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 14702 Accepted ...
- cmake更新版本简记
问题描述: 由于需求,要在服务器上安装ANTs(Advanced Normalization Tools).然而最新版的ANTs需要下载源码并用cmake编译, 于是根据https://github. ...
- [Luogu] P4198 楼房重建
题目描述 小A的楼房外有一大片施工工地,工地上有N栋待建的楼房.每天,这片工地上的房子拆了又建.建了又拆.他经常无聊地看着窗外发呆,数自己能够看到多少栋房子. 为了简化问题,我们考虑这些事件发生在一个 ...
- 公钥基本结构(PKI)的概念
公钥证书 ,通常简称为证书 ,用于在 Internet.Extranet 和 Intranet 上进行身份验证并确保数据交换的安全.证书的颁发者和签署者就是众所周知的 证书颁发机构 (CA),将在下一 ...
- [poj2396]Buget[上下界可行流]
题意:有一个n*m的方阵,里面的数字未知,但是我们知道如下约束条件:每一行的数字的和每一列的数字的和某些格子有特殊的大小约束,用大于号,小于号和等于号表示问:是否存在用正数填充这个方阵的方案,满足所有 ...
- redis 初学
1.网站:http://redis.cn/ 2.下载安装和配置 http://www.tuicool.com/articles/aQbQ3u 3.简述redis http://www.jb51.net ...
- class类加载机制
1.类的加载过程 a.加载-链接-初始化-使用-卸载 加载: 查找并加载类的二进制数据 链接: 验证类的正确性,为类的静态变量分配内存,并将其初始化为默认值,把类的符号引用转换为直接引用. 初始化: ...
- Linux 下android环境的配置
Linux 下android环境的配置 1. JDK下载 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads- ...
- Spring MVC 注解基础
@Controller @Controller 注解用于标记在 Java 类上.被 @Controller 标记过的类就是一个 SpringMVC Controller对象.DispatcherSer ...
- wps h5制作软件
相当好用这个