十 .web框架-----------VUE案例（十）_html-js-css

概述一. vue案例 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale= 一. vue案例

<!DOCTYPE HTML><HTML lang="en"><head>    <Meta charset="UTF-8">    <Title>智能社——http://www.zhinengshe.com</Title>    <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">    <Meta name="apple-mobile-web-app-capable" content="yes">    <Meta name="apple-mobile-web-app-status-bar-style" content="black">    <style>    </style>    <link rel="stylesheet" href="lib/bootstrap.min.CSS">    <script src="lib/jquery-1.7.2.Js"></script>    <script src="lib/bootstrap.Js"></script> <script type="text/JavaScript" src="lib/vue.Js" ></script>    <script>        window.onload=function(){            new Vue({                el:‘#Box‘,data:{                    myData:[],username:‘‘,age:‘‘,NowIndex:-100                },methods:{                    add:function(){                        this.myData.push({                            name:this.username,age:this.age                        });                        this.username=‘‘;                        this.age=‘‘;                    },deleteMsg:function(n){                        if(n==-2){                            this.myData=[];                        }else{                            this.myData.splice(n,1);                        }                    }                }            });        };    </script></head><body>    <div  ID="Box">        <form role="form">            <div >                <label for="username">用户名:</label>                <input type="text" ID="username"  placeholder="输入用户名" v-model="username">            </div>            <div >                <label for="age">年　龄:</label>                <input type="text" ID="age"  placeholder="输入年龄" v-model="age">            </div>            <div >                <input type="button" value="添加"  v-on:click="add()">                <input type="reset" value="重置" >            </div>        </form>        <hr>        <table >            <caption >用户信息表</caption>            <tr >                <th >序号</th>                <th >名字</th>                <th >年龄</th>                <th > *** 作</th>            </tr>            <tr  v-for="item in myData">                <td>{{$index+1}}</td>                <td>{{item.name}}</td>                <td>{{item.age}}</td>                <td>                    <button  data-toggle="modal" data-target="#layer" v-on:click="NowIndex=$index">删除</button>                </td>            </tr>            <tr v-show="myData.length!=0">                <td colspan="4" >                    <button  v-on:click="NowIndex=-2" data-toggle="modal" data-target="#layer" >删除全部</button>                </td>            </tr>            <tr v-show="myData.length==0">                <td colspan="4" >                    <p>暂无数据....</p>                </td>            </tr>        </table>        <!--模态框 d出框-->        <div role="dialog"  ID="layer">            <div >                <div >                    <div >                        <button type="button"  data-dismiss="modal">                            <span>&times;</span>                        </button>                        <h4 >确认删除么?</h4>                    </div>                    <div >                        <button data-dismiss="modal" >取消</button>                        <button data-dismiss="modal"  v-on:click="deleteMsg(NowIndex)">确认</button>                    </div>                </div>            </div>        </div>    </div></body></HTML>