Vue笔记:Vue小练习
div切换
<template> <div id="app"> <div class="tab-tit"> <!--点击设置curId的值 如果curId等于0,第一个a添加cur类名,如果curId等于1,第二个a添加cur类名,以此类推。添加了cur类名,a就会改变样式 @click,:class ,v-show这三个是vue常用的指令或添加事件的方式--> <a href="javascript:;" @click="curId=0" :class="{'cur':curId===0}">html</a> <a href="javascript:;" @click="curId=1" :class="{'cur':curId===1}">css</a> <a href="javascript:;" @click="curId=2" :class="{'cur':curId===2}">javascript</a> <a href="javascript:;" @click="curId=3" :class="{'cur':curId===3}">vue</a> </div> <div class="tab-con"> <!--根据curId的值显示div,如果curId等于0,第一个div显示,其它三个div不显示。如果curId等于1,第二个div显示,其它三个div不显示。以此类推--> <div v-show="curId===0"> html<br/> </div> <div v-show="curId===1"> css </div> <div v-show="curId===2"> javascript </div> <div v-show="curId===3"> vue </div> </div> </div> </template> <script> export default { data(){ return{ curId:1, } }, } </script> <style scoped> body{ font-family:"Microsoft YaHei"; } #app{ width: 600px; margin: 0 auto; } .tab-tit{ font-size: 0; width: 600px; } .tab-tit a{ display: inline-block; height: 40px; line-height: 40px; font-size: 16px; width: 25%; text-align: center; background: #ccc; color: #333; text-decoration: none; } .tab-tit .cur{ background: #09f; color: #fff; } .tab-con div{ border: 1px solid #ccc; height: 400px; padding-top: 20px; } </style>
购物车
<template> <div id="app"> <div v-if="books.length==0"> 购物车为空 </div> <div v-else> <table> <thead> <tr> <th></th> <th>书籍</th> <th>出版日期</th> <th>价格</th> <th>购买数量</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for='(value,index) in books'> <td >{{value.id}}</td> <td >{{value.name}}</td> <td >{{value.date}}</td> <td >{{value.price | showPrice}}</td> <!--使用过滤器改变金额格式--> <td > <button @click="decrement(index)" v-bind:disabled="value.count <=1">-</button> <!--按钮失效--> {{value.count}} <button @click="increment(index)">+</button> </td> <td > <button @click='remove(index)'>移除</button> </td> </tr> </tbody> </table> <h2 >总价格为{{totalPrice | showPrice}}</h2> </div> </div> </template> <script> export default { data(){ return{ books:[ { id:1, name:'小黄书', date:'2020-09', price:80.00, count:2 }, { id:2, name:'博人传', date:'2020-09', price:51.00, count:2 }, { id:3, name:'王书', date:'2020-09', price:80.00, count:2 }, { id:4, name:'牛逼书', date:'2020-09', price:80.00, count:2 } ] } }, computed:{ totalPrice(){ let total = 0; for(let i = 0; i < this.books.length; i++){ total += this.books[i].price * this.books[i].count; } return total; } }, methods:{ increment(index){ console.log('hello'+index); this.books[index].count++; }, decrement(index){ if(this.books[index].count>=2){ console.log('world'+index); this.books[index].count--; } }, remove(index){ this.books.splice(index,1);/*移除*/ } }, filters:{ showPrice(price){ return '¥'+price.toFixed(2);/*保留两位小数*/ } } } </script> <style scoped> table{ border:1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0; } th,td{ padding:8px 16px; border:1px solid #E9E9E9; text-align: left; } th{ background-color: #f7f7f7; color:#5c6b77; font-weight: 600; } </style>