zoukankan      html  css  js  c++  java
  • vue列表渲染

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    
    <body>
    <div id="demo">
        <p>v-for遍历数组</p>
        <ul>
            <li v-for="(p,index) in persons" :key="index">
                {{p.name}} ---{{p.age}} ---{{index}} -----
                <button @click="del(index)">删除</button>
                <button @click="update(index,{name:'Cat',age:46})">更新</button>
            </li>
        </ul>
        <p>v-for遍历对象</p>
        <ui>
            <li v-for="(value,key) in persons[1]"  :key="key">
                {{key}}-----{{value}}
            </li>
        </ui>
    </div>
    <script type="text/javascript" src="lib/vue.min.js"></script>
    <script type="text/javascript">
        new Vue({
            el: "#demo",
            data: {
                persons: [ // vue只是监视了persons的改变, 没有监视persons内部数组的改变
                    {name: 'Tom', age: 12},
                    {name: 'Admin', age: 13},
                    {name: 'Root', age: 16},
                    {name: 'Rose', age: 10},
                ]
            },
            methods: {
                del(index){
                    //删除指定的元素
                    this.persons.splice(index, 1)   // 删除功能
                },
                update(index, newP){
                    // 没有调用vue 数组的变异方法
    //                this.persons[index] = newP;  //该操作没有改变persons对象,只是改变了person指向的数组中的元素对象
    
    
                    this.persons.splice(index, 1, newP);  // 修改功能,先将index这个元素删除,再将newP添加到这儿
    //                this.persons.splice(index, 0, newP);  // 增加
    
    
                }
            }
    
        });
    </script>
    </body>
    </html>

    vue数组中的增删改实现:

    this.persons.splice(index, 1)   // 删除index这个元素
    this.persons.splice(index, 0, newP);  // 添加元素newP
    this.persons.splice(index, 1, newP);  // 将index下标元素改成newP
    

      

  • 相关阅读:
    把CentOS改成中文
    String,StringBuffer,StringBuilder三者性能对比
    在Linux上部署安装C/C++开发环境
    Kali Linux安装ssh服务
    Kali VirtualBox安装增强功能
    CentOS安装docker
    CentOS安装jdk11
    Java基本数据类型
    奥卡姆剃刀定律在Java代码中的体现——记一次LeetCode刷题心得
    Java 实现简易登录注册功能
  • 原文地址:https://www.cnblogs.com/z-qinfeng/p/12389773.html
Copyright © 2011-2022 走看看