变异方法:说白了就是对原方法进行了包装,包装后实现了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列表渲染的更多相关文章

  1. 03-Vue入门系列之Vue列表渲染及条件渲染实战

    3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...

  2. Vue列表渲染

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson09 一 for循环数组 <!DOCTYPE html> ...

  3. Vue入门系列（三）之Vue列表渲染及条件渲染实战

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  4. Vue 列表渲染及条件渲染实战

    条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue 帮我们提供了一个v-if的指 ...

  5. 14 Vue列表渲染

    列表渲染 用 v-for 把一个数组对应为一组元素(for循环) 我们可以用 v-for 指令基于一个数组来渲染一个列表. v-for 指令需要使用 item in items 形式的特殊语法, 其中 ...

  6. Vue 列表渲染中的key

    首先看一下官网的论述: 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略.如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单 ...

  7. Vue.js高效前端开发 • 【Vue列表渲染】

    全部章节 >>>> 文章目录 一.v-for指令 1.v-for指令使用 2.实践练习(待更新) 二.计算属性 1.计算属性创建和使用 2.实践练习(待更新) 三.侦听属性 1 ...

  8. vue 列表渲染 v-for

    1.数组列表       v-for 块中,我们拥有对父作用域属性的完全访问权限.v-for 还支持一个可选的第二个参数为当前项的索引 1.1 普通渲染       v-for="item ...

  9. vue 列表渲染 v-for循环

    v-for循环指令类似与html中C标签的循环,同样可以遍历数组,集合. 1.这里演示一下遍历数组的基本用法,代码如下 <!DOCTYPE html> <html> <h ...

随机推荐

  1. Winform 快速开发框架，上位机开发，工控机程序开发，CS程序开发

    1.当客户让你做个CS程序时,当你手上一穷二白,所有都要重复造轮,你是不是很烦. 2.但如果有一个通用的,快速开发框架,就可以把你从这些基础的工作解救出来,你专注做业务就好了. 3.本人其中一个项目的 ...

  2. python3+requests：post请求四种传送正文方式

    https://www.cnblogs.com/insane-Mr-Li/p/9145152.html 前言:post请求我在python接口自动化2-发送post请求详解(二)已经讲过一部分了,主要 ...

  3. ActiveX的AssemblyInof.cs文件 IObjectSafety  接口

    ActiveX的AssemblyInof.cs文件 IObjectSafety  接口 [Guid("D4176A17-2A33-4903-8F37-9EBDD7CAFFD3"), ...

  4. selenium的显示等待和隐式等待的区别

    什么是显示等待和隐式等待?显示等待就是有条件的等待隐式等待就是无条件的等待 隐式等待 当使用了隐式等待执行测试的时候,如果 WebDriver没有在 DOM中找到元素,将继续等待,超出设定时间后则抛出 ...

  5. Java并发多线程面试题 Top 50

    不管你是新程序员还是老手,你一定在面试中遇到过有关线程的问题.Java语言一个重要的特点就是内置了对并发的支持,让Java大受企业和程序员的欢迎.大多数待遇丰厚的Java开发职位都要求开发者精通多线程 ...

  6. Vue的11个生命周期函数的用法

    实例的生命周期函数(官方11个):beforeCreate:在实例部分(事件/生命周期)初始化完成之后调用.created:在完成外部的注入/双向的绑定等的初始化之后调用.beforeMount:在页 ...

  7. python多线程爆破压缩包密码

    import zipfile from threading import Thread #多线程库 import optparse #选定字典或者文件 def extractFile(zfile,pa ...

  8. SQL----EXISTS 关键字

    转自:http://blog.sina.com.cn/s/blog_65dbc6df0100mvfx.html 1.EXISTS基本意思 英语解释就是存在,不过他的意思也差不多,相当于存在量词'З'. ...

  9. Java必备技能：clone浅克隆与深克隆

    介绍 一直以来只知道Java有clone方法,该方法属于Object的,对于什么是浅克隆与深克隆就比较模糊了,现在就来补充学习一下. 概念 浅拷贝(浅克隆)复制出来的对象的所有变量都含有与原来的对象相 ...

  10. Centos7机器信息查看

    1.查看Linux信息 1.1查看32位或64位 uname -a 1.2查看内核版本 cat /proc/version 1.3查看发行版 cat /etc/centos-release 2.查看内 ...