阿里巴巴国际站运营,网络推广代运营公司,在线手机动画网站模板下载,网站深圳看效果图 Vue长相思 刚学Vue#xff0c;正好在追剧#xff0c;看到这个小案例觉得挺好玩的#xff0c;第一天学#xff0c;代码太简陋了
代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta name正好在追剧看到这个小案例觉得挺好玩的第一天学代码太简陋了
代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
script src../vue.js/script
style.box {/* width: 1200px; */height: 500px;display: flex;flex-direction: column;border: rgb(235, 137, 137) solid 3px;border-radius: 33px;}h1,.title {text-align: center;background: linear-gradient(to right, red, rgb(183, 0, 255), blue);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}.body {display: flex;justify-content: space-around;/* background-color: aqua; */}img {width: 200px;height: 300px;}.row {width: 210px;padding-right: 1%;border-right: 1px blueviolet dashed;}.row:last-child {padding-right: 20px;border-right: none;}h3 {text-align: center;}
/stylebodydiv idappdiv classboxh1 classtitle长相思追剧小游戏/h1div classbodydiv classrow1 rowimg src./img/张晚意.jpg alth3苍玄 /h3button clickfn(1,0)罚站1/buttonspan{{result}}:{{result_time}}min /spanbutton clickfn(0,1)坐下1/button/divdiv classrow2 rowimg src./img/相柳.jpg alth3 相柳 /h3button clickfn(1,0)罚站1/buttonspan{{result}}:{{result_time}}min /spanbutton clickfn(0,1)坐下1/button/divdiv classrow3 rowimg src./img/涂山璟.jpg alth3涂山璟/h3button clickfn(1,0)罚站1/buttonspan{{result}}:{{result_time}}min /spanbutton clickfn(0,1)坐下1/button/divdiv classrow4 rowimg src./img/赤水丰隆.jpg alth3赤水丰隆/h3button clickfn(1,0)罚站1/buttonspan{{result}}:{{result_time}}min /spanbutton clickfn(0,1)坐下1/button/div/div/divp stylemargin-top:100px ;罚站和坐下 可以变颜色/p/div
/bodyscriptconst app new Vue({el: .row1,data: {result: 咋办,result_time: 0,fail_time: 0,succeed_time: 0,},methods: {fn(ft, st) {this.fail_time ft;this.succeed_time stthis.result_time this.fail_time - this.succeed_timeif (this.result_time 0) {this.result 罚站;}else {this.result 坐下;this.result_time -this.result_time}console.log(this);}}})const app2 new Vue({el: .row2,data: {result: 咋办,result_time: 0,fail_time: 0,succeed_time: 0,},methods: {fn(ft, st) {this.fail_time ft;this.succeed_time stthis.result_time this.fail_time - this.succeed_timeif (this.result_time 0) {this.result 罚站;}else {this.result 坐下;this.result_time -this.result_time}console.log(this);}}})const app3 new Vue({el: .row3,data: {result: 咋办,result_time: 0,fail_time: 0,succeed_time: 0,},methods: {fn(ft, st) {this.fail_time ft;this.succeed_time stthis.result_time this.fail_time - this.succeed_timeif (this.result_time 0) {this.result 罚站;}else {this.result 坐下;this.result_time -this.result_time}console.log(this);}}})const app4 new Vue({el: .row4,data: {result: 咋办,result_time: 0,fail_time: 0,succeed_time: 0,},methods: {fn(ft, st) {this.fail_time ft;this.succeed_time stthis.result_time this.fail_time - this.succeed_timeif (this.result_time 0) {this.result 罚站;}else {this.result 坐下;this.result_time -this.result_time}console.log(this);}}})/script/html优化方向
1.“罚站”和“坐下”的颜色可以改变 2.块结构不对吧row应该用li 3.笨笨地定义了4个对象不然点击人物按钮其他任务的时长也会变但肯定有优化的办法就emmm类似this.result 但是具体的还不会哎 4.每次刷新网页之前的记录会保留下来好像是设置DOM啥的回头在复习一下都忘记了
