vue简单实例（todolist）

来源：互联网发布：开票软件有哪些编辑：程序博客网时间：2024/05/29 13:11
本实例运用vue的一些常用指令如：v-for,v-on,v-model等；
v-on:click=”“可简写为@click=“”
vue+bootstrap实战

注：bootstrap是基于jQuery的，所以引入bootstrap的同时，需引入jQuery。
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <link rel="stylesheet" href="css/bootstrap.min.css"/>    <script src="js/jquery-1.7.2.js"></script>    <script src="js/bootstrap.js"></script>    <script src="js/vue.js"></script>    <script>        window.onload=function(){            new Vue({                el:"#box",                data:{                    myData:[],                    username:'',                    age:'',                    wage:''                },                methods:{                    add:function(){                        this.myData.push({                            name:this.username,                            age:this.age,                            wage:this.wage//当点击添加时将name，age,wage推入myData中                        });                        this.username='';                        this.age=''; //清空值                        this.wage='';                    },                    deleteMsg:function(n){                        if(n==-2){                            this.myData=[];//点击全部删除                        }else{                            this.myData.splice(n,1);//删除                        }                    }                }            })        }    </script></head><body><div class="container" id="box">    <form role="form">    <div class="form-group">        <label for="username">用户名:</label>        <input type="text" class="form-control" id="username" v-model="username"   placeholder="请输入用户名.."/>    </div>        <div class="form-group">            <label for="age">年 龄:</label>            <input type="text" class="form-control" id="age" v-model="age" placeholder="请输入年龄.."/>        </div>        <div class="form-group">            <label for="wage">工 资:</label>            <input type="text" class="form-control" id="wage" v-model="wage" placeholder="工资.."/>        </div>        <div class="form-group">            <input type="button" value="添加" class="btn btn-primary" @click="add()"/>            <input type="reset" value="重置" class="btn btn-danger"/>        </div>    </form>        <hr/>        <table class="table table-bordered table-hover">            <caption class="h3">用户信息表</caption>            <tr>                <th class="text-center">序号</th>                <th class="text-center">用户名</th>                <th class="text-center">年龄</th>                <th class="text-center">工资</th>                <th class="text-center">操作</th>            </tr>            <tr class="text-center" v-for="item in myData">                <td>{{$index+1}}</td>                <td>{{item.name}}</td>                <td>{{item.age}}</td>                <td>{{item.wage}}</td>                <td>                    <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer"                    @click="nowIndex=$index">删除</button>                </td>            </tr>            <tr  v-show="myData.length!=0">                <td colspan="5" class="text-center">                    <button class="btn btn-danger"  @click="nowIndex=-2" data-toggle="modal" data-target="#layer">全部删除</button>                </td>            </tr>            <tr v-show="myData.length==0">                <td colspan="5" class="text-center">                    暂无数据.....                </td>            </tr>        </table>    <div role="dialog" class="modal" id="layer">        <div class="modal-dialog">            <div class="modal-content">                <div class="modal-header">                   <button class="close" data-dismiss="modal">                       <span>&times</span>                   </button>                    确认删除吗？                </div>                <div class="modal-body text-right">                    <button class="btn btn-primary" data-dismiss="modal" @click="deleteMsg()">确认</button>                    <button class="btn btn-danger" data-dismiss="modal">取消</button>                </div>            </div>        </div>    </div></div></body></html>
阅读全文
0 0