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

    <!--
    1. 列表显示
    数组: v-for / index

    <h2>测试: v-for 遍历数组</h2>
    <ul>
    <li v-for="(p, index) in persons" :key="index">
    {{index}}--{{p.name}}--{{p.age}}

    </li>
    </ul>

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

    <ul>
    <li v-for="(item, key) in persons[1]" :key="key">{{key}}={{item}}</li>
    </ul>
    <button @click="addP({name: 'xfzhang', age: 18})">添加</button>


    2. 列表的更新显示
    删除item
        --<button @click="deleteP(index)">删除</button>

    替换item

        --<button @click="updateP(index, {name:'Cat', age: 16})">更新</button>

    -->


    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
    new Vue({
    el: '#demo',
    data: {
    persons: [
    {name: 'Tom', age:18},
    {name: 'Jack', age:17},
    {name: 'Bob', age:19},
    {name: 'Mary', age:16}
    ]
    },

    methods: {
    deleteP (index) {
    this.persons.splice(index, 1) // 调用了不是原生数组的splice(), 而是一个变异(重写)方法
    // 1. 调用原生的数组的对应方法
    // 2. 更新界面
    },

    updateP (index, newP) {
    console.log('updateP', index, newP)
    // this.persons[index] = newP // vue根本就不知道
    this.persons.splice(index, 1, newP)
    // this.persons = []
    },

    addP (newP) {
    this.persons.push(newP)
    }
    }
    })
  • 相关阅读:
    CentOS安装
    java字符串
    h5弹球对战游戏
    看是否健康
    layui社区源码笔记之fly-list
    layui社区源码笔记之user-rank
    layui社区源码笔记之layui-input form
    layui社区源码笔记之fly-tab
    layui社区模板主页框架分析
    分组答辩小程序
  • 原文地址:https://www.cnblogs.com/czx299/p/13621671.html
Copyright © 2011-2022 走看看