zoukankan      html  css  js  c++  java
  • Vue列表渲染:v-for的使用

    使用v-for,同时指定key(用v-bind绑定)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Hello World</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <ul>
    			<li v-for="(item, index) in persons" :key='index'>
    				{{item.name}}---{{item.age}}---
    				<button @click="delPerson(index)">删除</button>---
    				<button @click="updatePerson(index, {name:'cat', age:12})">更新</button>
    				</li>
    		</ul>
        </div>
    
        <script>
            const vm = new Vue({
                el: '#app',
                data: {
                    persons: [
    					{name:'tom', age:19},
    					{name:'jerry', age:15},
    					{name:'spike', age:20}
    				]
                },
    			methods:{
    				delPerson(index){
    					this.persons.splice(index, 1)
    				},
    				updatePerson(index, newPerson){
    					this.persons.splice(index, 1, newPerson)
    				}
    			}
            })
        </script>
    </body>
    </html>
    

  • 相关阅读:
    Kvm virsh
    lvs tunl
    django表单使用
    django上传图片
    django框架admin使用
    django模板的使用
    django数据库操作
    django数据库交互
    django数据库中
    django之类视图
  • 原文地址:https://www.cnblogs.com/pangqianjin/p/14893099.html
Copyright © 2011-2022 走看看