案例：图书管理——补充知识（数组相关API）||补充知识（数组响应式变化）

案例：图书管理

Vue数组操作

1、变异方法：会影响数组的原始数据的变化。

2、替换数组：不会影响原始的数组数据，而是形成一个新的数组。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><div><span><input type="text" v-model='fname'><button @click='add'>添加</button><button @click='del'>删除</button><button @click='change'>替换</button></span></div><ul><li :key='index' v-for='(item,index) in list'>{{item}}</li></ul></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">var vm = new Vue({el: '#app',data: {fname: '',list: ['apple','orange','banana']},methods: {add: function(){this.list.push(this.fname);},del: function(){this.list.pop();},change: function(){this.list = this.list.slice(0,2);}}});</script>
</body>
</html>

补充知识（数组响应式变化）


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><ul><li v-for='item in list'>{{item}}</li></ul><div><div>{{info.name}}</div><div>{{info.age}}</div><div>{{info.gender}}</div></div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*动态处理响应式数据*/var vm = new Vue({el: '#app',data: {list: ['apple', 'orange', 'banana'],info: {name: 'lisi',age: 12}},});// vm.list[1] = 'lemon';  //不是响应式的Vue.set(vm.list, 2, 'dymhh');vm.$set(vm.list, 1, 'lemon');// vm.info.gender = 'male';  //不是响应式的vm.$set(vm.info, 'gender', 'female');</script>
</body>
</html>

案例：图书管理——补充知识（数组相关API）||补充知识（数组响应式变化）相关推荐

[Vue.js] 基础 -- 综合案例 -- 图书管理
综合案例 – 图书管理补充知识(数组相关API) 变异方法(修改原有数据) push() pop() shift() unshift() splice() sort() reverse() 替换数组 ...
各种风格简洁单页响应式html5模板_简洁响应式单页跳转设计案例源码340多套订餐企业模板高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响
各种风格简洁单页响应式html5模板_简洁响应式单页跳转设计案例源码340多套订餐企业模板高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响 ...
数据库开发案例—图书管理系统设计
目录第1关数据库表设计-图书表本关任务:创建图书管理数据库系统的图书表. 数据库整体设计代码实现第2关数据库表设计-读者表代码实现第3关数据库表设计-关联表代码实现第1关数据库 ...
vue案例-图书管理
1.学习vue时做的一个小案例,本身案例很简单,经过优化又加些比较常用的功能,比如在添加图书前,先判断编号是否存在,并提示给用户,并且编号文本框只能输入数字等等优化. 2.使用到数组数据,方法,监视, ...
Django案例——图书管理案例
文章目录项目开始前 App的建立和路由分配数据库的建立与连接模型映射(建立表格) 视图函数最终的效果图项目代码连接见:链接:https://pan.baidu.com/s/1mRYMVZkp ...
vue 数组指定位置添加数据_VUE 响应式原理源码：带你一步精通 VUE | 原力计划...
作者 | 爱编程的小和尚责编 | 王晓曼出品 | CSDN博客学过 VUE 如果不了解响应式的原理,怎么能说自己熟练使用 VUE,要是没有写过一个简易版的 VUE 怎么能说自己精通 VUE,这篇 ...
前端学习（1222）:综合案例图书管理1
迷你图书管理器1.2 - 面向对象+集合
迷你图书管理器 author:luckyboy! version:1.2 知识储备:变量.数据类型.选择结构.循环结构.数组 .面向对象.集合系统概述:为某图书馆开发一个迷你图书管理系统,实现图书的 ...
Java迷你图书管理器1.2-面向对象+I/O流
CSDN话题挑战赛第2期参赛话题:Java技术分享迷你图书管理器 author:luckyboy! version:1.2 知识储备:变量.数据类型.选择结构.循环结构.数组 .面向对象.集合和I ...

案例：图书管理——补充知识（数组相关API）||补充知识（数组响应式变化）

案例：图书管理

补充知识（数组响应式变化）

案例：图书管理——补充知识（数组相关API）||补充知识（数组响应式变化）相关推荐

最新文章

热门文章