- 深刻的感受到控制台的用处，以后的学习中，要善用控制台，多学习控制台的用法；
- 代码千万不能复制，不懂得东西要慢慢摸索；
- 在js中" "与' '是真的没区别；
v-for的理解
简单粗暴的代码方式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script type="text/javascript" src="js/vue.js"></script> </head> <style type="text/css"> body { font-family: Helvetica Neue, Arial, sans-serif; font-size: 14px; color: #444; } table { border: 2px solid #42b983; border-radius: 3px; background-color: #fff; } th { background-color: #42b983; color: rgba(255,255,255,0.66); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -user-select: none; } </style> <body> <div class="col-md-4"></div> <div id="ex" class="col-md-4"> <table class="table table-hover .table-bordered"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>数学</th> <th>语文</th> <th>物理</th> <th>编辑</th> </tr> </thead> <tbody> <tr v-for="person in persons"> <td >{{ person.name }}</td> <td>{{ person.age }}</td> <td v-for="score in person.scores" >{{score.math}}{{score.chinese}}{{score.physical}}</td> <td> <button @click="delete($index)" class="btn btn-danger">删除</button> </td> </tr> </tbody> </table> </div> <div class="col-md-4"></div> </body> <script type="text/javascript"> var ex = new Vue({ el:'#ex', data:{ persons:[ {"name":'团子',"age":'16',"scores":[ {"math":98},{"chinese":90},{"physical":99}, ]}, {"name":'李四',"age":'17',"scores":[ {"math":92},{"chinese":50},{"physical":39}, ]}, {"name":'王五',"age":'18',"scores":[ {"math":67},{"chinese":69},{"physical":86}, ]}, {"name":'赵六',"age":'16',"scores":[ {"math":32},{"chinese":54},{"physical":79}, ]}, ] }, methods:{ delete:function(index){ this.persons.splice(index,1); } } }) //alert(ex.persons[0].name); </script> </html>
运行结果：
-
在html的布局中，第二重循环一定要包裹进第一重循环内；
-
<p>{{techName}}</p>这种表达正确，而<p v-model="techName"></p>的表达错误,可以用 <p v-text="techName"></p>
-
命名方式：最好以驼峰的命名方式，例如{{techName}}；而{{tech-name}}的命名方式是错误的，至于为什么，宝宝也不知道
删除功能的实现：
<button @click="delete($index)" class="btn btn-danger">删除</button>
methods:{
delete:function(index){
this.persons.splice(index,1);
}
}
-
v-on:click的使用，v-on指令可以缩写为@符号，变为@click
- 注意{{$index}}的使用，代表数组编号
- splice的使用：https://www.zybuluo.com/Secretmm/note/429417#splice-方法
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
当是一维数组的时候，可以这么用。仔细看weeks与times的对比
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/sparetime.css"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script type="text/javascript" src=""></script> <style type="text/css"> .checked { background-color: #18a2ea; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <div> <div class="col-md-6"> <p class="pone">请点击选择你的个人空余时间</p> </div> <div class="col-md-2"> <button disabled class="btna">m</button> <span class="ptwo">非空余时间</span> </div> <div class="col-md-2"> <button disabled class="btnb">m</button> <span class="ptwo">空余时间</span> </div> <div class="col-md-2"></div> </div> <div style="height: 50px"></div> <div> <table class="tableone" id="tabone"> <thead> <tr> <th>可上课时间</th> <th v-for="week in weeks"> {{week.w}} </th> </tr> </thead> <tbody> <tr v-for="i in 13"> <th> {{times[i]}} </th> <td v-for="week in weeks" v-bind:data-index="week.w+'.'+times[i]"> </td> </tr> </tbody> <tfoot> <tr> <th colspan="8"> <button type="button" class="btn btn-primary" v-on:click="save()">提交</button> </th> </tr> </tfoot> </table> </div> </div> </div> </div> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var tabone =new Vue({ el:'#tabone', data:{ weeks:[ {w:"星期一"}, {w:"星期二"}, {w:"星期三"}, {w:"星期四"}, {w:"星期五"}, {w:"星期六"}, {w:"星期日"}, ], times: [ "8:00-9:00", "9:00-10:00", "10:00-11:00", "11:00-12:00", "12:00-13:00", "13:00-14:00", "14:00-15:00", "15:00-16:00", "16:00-17:00", "17:00-18:00", "18:00-19:00", "19:00-20:00", "20:00-21:00", ] }, methods: { save: function(){ var data = $("table").find("td.checked").map(function() { return this.getAttribute("data-index"); }); console.log(data); } }, ready: function() { $(document.body).on("click", 'td', function() { var $this=$(this); if($this.hasClass('checked')) { $this.removeClass("checked"); } else { $this.addClass("checked"); } }) } }); </script> </html>