-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwine.html
158 lines (155 loc) · 5.55 KB
/
wine.html
1
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <link href="//cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="css/common.css"> <!--[if lt IE 9]--> <script src="//cdn.bootcss.com/html5shiv/r29/html5.min.js"></script> <!--[endif]--> <script>var _hmt = _hmt || [];(function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?19ab7aa114bcfd4256a731a9ed0c016f"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script></head><body><header> <ul> <li><a href="javascript:void(0);">首页</a></li> <li><a href="javascript:void(0);">域名注册</a></li> <li><a href="javascript:void(0);">云主机</a></li> <li><a href="javascript:void(0);">自主建站</a></li> <li><a href="javascript:void(0);">服务器备案</a></li> <li><a href="javascript:void(0);">关于</a></li> <li><a href="wine.html">原瓶进口</a></li> </ul></header><div class="container" id="app"> <div class="row"> <p>{{msg}}</p> <p>我输入的是 <b>{{time}}</b></p> <input type="text" v-model="time"> <input type="text" v-model="hide"> <div v-if="hide">这是一个隐藏的层，点击按钮展示</div> <input type="radio" value="0" v-on:change="changeEvent(0);" checked="true" name="hide">隐藏 <input type="radio" name="hide" v-on:change="changeEvent(1);" value="0" id="">展示 <ul class="pagination"> <li v-for="n in pageCount" :class="activeNumber === n + 1 ? 'active' : ''"> <a href="javascripit:void(0)" @click="gotoPage(n+1)">{{ n + 1 }}</a> </li> </ul> <span v-if="hide.length>5">由hide的长度来决定是否隐藏</span> <span v-else>{{hide}}</span> </div> <br><br><br><br> <div class="row"> <div class="form-group col-lg-12 col-sm-12"> <label class="control-label col-lg-4 col-sm-6"> 用户名</label> <div class="col-lg-8 col-sm-6"> <input type="text" class="form-control" v-model="newPerson.userName"> </div> </div> <div class="form-group col-lg-12 col-sm-12"> <label class="control-label col-lg-4 col-sm-6"> 用户性别</label> <div class="col-lg-8 col-sm-6"> <div class="radio-inline"> <label for=""> 男 <input type="radio" v-model="newPerson.sex" id="" value="男"> </label> </div> <div class="radio-inline"> <label for=""> 女 <input type="radio" v-model="newPerson.sex" id="" value="女"> </label> </div> <div class="radio-inline"> <label for=""> 人妖 <input type="radio" v-model="newPerson.sex" id="" value="人妖"> </label> </div> </div> </div> <div class="form-group"> <button class="btn btn-default btn-sm" @click="addPerson">添加</button> </div> </div> <div class="row"> <table class="table" id="user_list"> <thead> <th>姓名</th> <th>性别</th> <th>操作</th> </thead> <tbody> <tr v-for="(p,index) in persons"> <td>{{p.userName}}</td> <td>{{p.sex}}</td> <td> <button class="btn" @click="deleteRecord(index)">删除</button> </td> </tr> </tbody> </table> </div></div></body><script src="lib/vue/dist/vue.min.js"></script><script src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script><script src="//cdn.bootcss.com/bootstrap/3.1.1/js/bootstrap.min.js"></script><script> var app = new Vue({ el: "#app", data: { msg: (+new Date()), time: "这是一个输入框", activeNumber: 1, pageCount: 10, hide: true, persons: [ { userName: "张三1", sex: "男" }, { userName: "张三2", sex: "人妖" } ], newPerson: { userName: "", sex: "" } }, methods: { /** * 分页 * @param e */ gotoPage: function (e) { this.activeNumber = e; }, changeEvent: function (e) { this.hide = !!e; }, addPerson: function (e) { this.persons.push(this.newPerson); this.newPerson = {userName: "", sex: ""}; }, deleteRecord: function (index) { console.log(index) this.persons.splice(index, 1); } } })</script><script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1263366275'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s22.cnzz.com/z_stat.php%3Fid%3D1263366275%26online%3D1%26show%3Dline' type='text/javascript'%3E%3C/script%3E"));</script></html>