zoukankan      html  css  js  c++  java
  • Vue 第一章练习 v-for

    1、练习v-for v-model 实现数据的增加和删除

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--cdn镜像快速导入Vue包-->
        <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <!---->
        id:<input type="text" value="id" v-model="id">
        姓名:<input type="text" value="name" v-model="name">
        性别:<input type="text" value="sex" v-model="sex">
        <input type="button" value="添加" @click="btnAdd">
        <input type="button" value="删除" @click="btnDel">
    
        <p v-for="(user,i) in users" :key="user.name">
            <input type="checkbox" @click="getState(i)">
            序号:{{user.id}},姓名:{{user.name}},性别{{user.sex}}</p>
    </div>
    <script>
        //2.创建一个vue实例
        var vm = new Vue({
            el: '#app',    //表示当前我们new的这个Vue实例,要控制页面上的哪个区域
            data: { //data属性中存放的是el中要用到的数据
                users:[
                    {id:1,name:"yang",sex:'男'},
                    {id:2,name:"jie",sex:'男'},
                    {id:3,name:"shao",sex:'女'}
                ],
                id:'',
                name:'',
                sex:'',
                index:0,
            },
            methods:{
                btnAdd(){
                    this.users.push({id:this.id,name:this.name,sex:this.sex})
                },
                getState(i){
                    console.log(i)
                    this.index = i
                },
                btnDel(){
                    console.log(this.index)
                    this.users.splice(this.index,1)
                }
    
            }
        })
    </script>
    </body>
    </html>
  • 相关阅读:
    spring mvc 详细配置
    eclipse PermGen space解决方案
    JDK环境变量详细讲解
    Linux 中如何卸载已安装的软件
    Struts2工作原理
    HashMap的工作原理深入再深入
    Session的工作原理
    什么办法可以替代distinct
    脚踏实地才能仰望星空
    Ubuntu 进阶命令——长期不定时更新
  • 原文地址:https://www.cnblogs.com/ywjfx/p/12539460.html
Copyright © 2011-2022 走看看