VUE 列表渲染 列表过滤

2019/7/22 15:27:37 人评论 次浏览 分类:vue.js

广告开始--------------------------

全网最全17套vue.js视频教程

文件格式:视频      大小:160G左右

预览网址:【直接浏览网址即可】http://nicethemes.cn/product/view14.html

从入门到精通全套vue.js实战视频教程。

广告结束--------------------------

知识共享许可协议 版权声明:署名,允许他人基于本文进行创作,且必须基于与原先许可协议相同的许可协议分发本文 (Creative Commons)

在这里插入图片描述在这里插入代码片

  <div id="demo">
        <h2> 测试: v-for 遍历数组</h2>
        <ul>
            <!-- p是当前元素    index是下标 -->
            <li v-for="(p,index) in persons" :key="index">
            {{index}}:{{p.name}}--------->{{p.age}}----<button @click="deleteP(index)">删除</button>------<button @click="updateP(index,{name:'cat',age:35})">更新</button>

            </li>    
        </ul>
        <h2> 测试: v-for 遍历对象</h2>

        <ul>
            <li v-for="(item,key) in persons[1]" :key="key">
                    {{item}} -------{{key}}
            </li>
        </ul>
    </div>


    

    <script type="text/javascript" src="VUE.js"></script>
    <script>
        new Vue({
            el: '#demo',
            data: {
                persons:[      //vue本身只是监视了persons的改变而没有监视数组内部数据的改变
                //vue重写了数组中的一系列改变数组内部数据的方法(先调用原生,更新界面)  数组内部改变  界面自动变化
                    {name:'张喜',age:16},
                    {name:'侯嘉',age: 16},
                    { name: '刘小康', age: 16 },
                    { name: '王珂栋', age: 16 }
                ]
            },
            methods: {
                deleteP(index){
                            //删除persons中指定index的p
                            //splice是删除函数 第一个是删除的index(索引  第二个是删除的 个数
                            console.log(index)
                   this.persons.splice(index,1)    
                },
                updateP(index,newP){
                    // this.persons[index] = newP //因为这并没有改变persons本身而是改变了里面数组的数据  没有调用变异方法  vue不会更新界面
                    console.log(this.persons)  //单写这一条前端不能够展现但是数据变了      
                    this.persons.splice(index,1,newP)  //现在是先删除 然后再添加     splice功能强大能实现增删改  
                    // 如果是增加的话   中间那个参数变为0  就行
                }
            },

        })
    </script>

列表过滤:


上一篇:vue中使用less

下一篇:vue-cli 3.0安装详解

相关资讯

    暂无相关的资讯...

共有访客发表了评论 网友评论

验证码: 看不清楚?
    -->