(尚009)Vue列表渲染
变异方法:说白了就是对原方法进行了包装,包装后实现了2个功能1:实现原方法的功能;2.更新界面.
1.test009.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="demo">
<h2>测试:v-for遍历数组</h2>
<!--根据数据格式动态显示数据-->
<ul>
<!--(p,index) in persons:p为当前元素,index为下标,persons为要遍历的数组-->
<!--写for循环,通常要写key,因为index要变,故key前面加冒号-->
<li v-for="(p,index) in persons" :key="index">
{{index}}--{{p.name}}--{{p.age}}
--<button @click="deleteP(index)">删除</button>
--<button @click="updateP(index,{name:'诸葛亮',age:'22'})">更新</button>
</li>
</ul>
<h2>测试:v-for遍历对象</h2>
<!--{name:'张飞',age:'19'}显示name和age-->
<ul>
<!--value为属性值;key为属性名-->
<li v-for="(value,key) in persons[1]" :key="key">
{{value}}---{{key}}
</li>
</ul>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
//vue本身只是监视了persons的改变,没有监视数组内部数据的改变
//Vue重写了数组中的一系列改变数组内部数据的方法(先掉用原生,更新界面:说白了就是实现了数据绑定)--->数组内部改变,界面自动变化
new Vue({
el: '#demo',
data:{
//数组
persons:[
{name:'赵云',age:'18'},
{name:'张飞',age:'19'},
{name:'关羽',age:'20'},
{name:'刘备',age:'21'}
]
},
methods:{
deleteP(index){
//删除persons中指定的index的p
//(index,1),1代表删除1各元素
this.persons.splice(index,1)//spliced的第一个功能删除
},
//newP为新的人
updateP(index,newP){
//this.persons[index]=newP //并没有改变persons本身,数组内部发生了变化,但并没有调用变异方法,Vue不会更新界面
this.persons.splice(index,1,newP) //splice第二个功能:修改;splice第三个功能:增加splice(index,0,newP) 0表示不删除 }
}
})
</script>
</body>
</html>
2.网页截图
厉害了!!!
(尚009)Vue列表渲染的更多相关文章
- 03-Vue入门系列之Vue列表渲染及条件渲染实战
3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...
- Vue列表渲染
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson09 一 for循环数组 <!DOCTYPE html> ...
- Vue入门系列（三）之Vue列表渲染及条件渲染实战
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- Vue 列表渲染及条件渲染实战
条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue 帮我们提供了一个v-if的指 ...
- 14 Vue列表渲染
列表渲染 用 v-for 把一个数组对应为一组元素(for循环) 我们可以用 v-for 指令基于一个数组来渲染一个列表. v-for 指令需要使用 item in items 形式的特殊语法, 其中 ...
- Vue 列表渲染中的key
首先看一下官网的论述: 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略.如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单 ...
- Vue.js高效前端开发 • 【Vue列表渲染】
全部章节 >>>> 文章目录 一.v-for指令 1.v-for指令使用 2.实践练习(待更新) 二.计算属性 1.计算属性创建和使用 2.实践练习(待更新) 三.侦听属性 1 ...
- vue 列表渲染 v-for
1.数组列表 v-for 块中,我们拥有对父作用域属性的完全访问权限.v-for 还支持一个可选的第二个参数为当前项的索引 1.1 普通渲染 v-for="item ...
- vue 列表渲染 v-for循环
v-for循环指令类似与html中C标签的循环,同样可以遍历数组,集合. 1.这里演示一下遍历数组的基本用法,代码如下 <!DOCTYPE html> <html> <h ...
随机推荐
- 【C#】上机实验七
.开发一个窗体应用程序,窗体上能接收华氏温度或者摄氏温度,点击相应按钮可以相互转换. 要求转换后的华氏温度或者摄氏温度保留小数点后3位,程序中要有异常处理结构. using System; using ...
- 前端开发 ECMAScript-1概述
https://www.cnblogs.com/gaoya666/p/8560745.html ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Com ...
- 【转载】C#中List集合SingleOrDefault和FirstOrDefault方法有何不同
在C#的List集合类的操作过程中,有时候我们会使用到List集合的SingleOrDefault方法和FirstOrDefault等方法,这2个方法都是System.Linq.Enumerable类 ...
- 第二章：jQuery初探
一.引入jQuery XXXX.js文件 <script>标签 1.版本选择 当前jQuery有两个分支 1.x 支持ie6.7.8 jquery-1.11.2.js:未经过压缩,适合同学 ...
- SSRF绕过IP限制方法总结
SSRF绕过IP限制方法总结 - Summary of SSRF methods for bypassing IP restrictions -https://www.cnblogs.com/iAmS ...
- BIN文件合并烧写
可以实现将Bootloader和Application合并烧写 使用UBIN.exe工具或者J-Flash工具 UBIN工具 选择Bootloader源文件 添加Bootloader源文件 选择App ...
- stm32 USART_IT_IDLE中断 一帧数据
USART_IT_IDLE中断,是串口收到一帧数据后,发生的中断.也可以叫做一包数据 USART_IT_IDLE和USART_IT_RXNE区别 当接收到1个字节,会产生USART_IT_RXNE中断 ...
- react基础学习和react服务端渲染框架next.js踩坑
说明 React作为Facebook 内部开发 Instagram 的项目中,是一个用来构建用户界面的优秀 JS 库,于 2013 年 5 月开源.作为前端的三大框架之一,React的应用可以说是非常 ...
- 一些 SQLite技巧
SQLite自增ID自段 使用方法为 INTEGER PRIMARY KEY AUTOINCREMENT 如: CREATE TABLE 21andy ( id INTEGER PRIMA ...
- 【转】如何使用jupyter编写数学公式(译)
[1.如何使用jupyter编写数学公式(译)][1] [1]: https://www.jianshu.com/p/93ccc63e5a1b