1.注册页面
(具体图片见day01)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>function</title><script src="vue.js"></script>
</head>
<body>
<div id="root"><table cellspacing="10px"><tr><td>注册邮箱:</td><td><input></td></tr><tr><td></td><td>你还可以使用手机注册</td></tr><tr><td>创建密码:</td><td><input></td></tr><tr><td>真实姓名:</td><td><input></td></tr><tr><td align="right">性别:</td><td><input type="radio" name="aaa" value="1">男<input type="radio" name="aaa" value="2">女</td></tr><tr><td align="right">生日:</td><td><select><option value="2000">2000</option><option value="2001">2001</option><option value="2002">2002</option></select>年<select><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>月<select><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>日</td></tr><tr><td align="right">我正在:</td><td><select><option value="1">学习</option><option value="2">睡觉</option><option value="3">打游戏</option></select></td></tr><tr><td></td><td><img id="img1" v-bind:src='msg'><zidingyi @click="Change()">看不清,换一张?</zidingyi></td></tr><tr><td align="right">验证码:</td><td><input id="inputStr" v-model="inputStr"></td></tr><tr><td></td><td><img src="btn_reg.gif" @click="Go()"></td></tr></table>
</div><script>new Vue({el:"#root",data:{listUrl:["1111.png","1234.png","2222.png","3333.png",],listNum:["1111","1234","2222","3333"],midTag:-1,msg:'verycode.gif',inputStr:''},methods:{Change:function () {var bool=truewhile(bool){var num=Math.floor(Math.random()*this.listUrl.length)if (num!=this.midTag){//防止重复出现相同的图片bool=falsethis.midTag=num}}this.msg=this.listUrl[this.midTag]},Go:function () {if (this.midTag==-1){if (this.inputStr=="bnksu"){alert("验证码正确")} else{alert("验证码错误")}}var str=this.listNum[this.midTag]if (this.inputStr==str){alert("验证码正确")} else{alert("验证码错误")}}}})
</script>
</body>
</html>思路:
1.导入vue.js
2.利用div包括并命名为root,创建vue对象并捕捉root
3.监听Change和Go方法
4.实现Change方法:
a.将img标签中的src通过v-bind绑定,通过msg进行操作
b.只需要将两个list数组存入data中,然后通过this获取,就可对其进行操作(方法同day04,唯一不同的是要改变msg的值)
5.实现Go的方法:
双向绑定input,获取其值以后方法同day04
2.汇率换算页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="vue.js"></script><style>select{height: 25px;margin: 3px;}input{padding: 3px;margin: 3px;}button{height: 26px;margin-top: 2px;}table{border: 1px solid black;}td{border: 1px solid black;text-align: center;width: 200px;height: 40px;}.aaa{background-color: red;}</style>
</head>
<body>
<div id="root"><select id="select1" v-model="select1"><option value="0">美元</option><option value="1">人民币</option><option value="2">欧元</option><option value="3">日元</option><option value="4">韩元</option><option value="5">港元</option></select><button @click="button1()">互换</button><select id="select2" v-model="select2"><option value="0">美元</option><option value="1">人民币</option><option value="2">欧元</option><option value="3">日元</option><option value="4">韩元</option><option value="5">港元</option></select>数额:<input id="inputStr" v-model="inputStr"><button @click="button2()">按汇率换算</button><div><table><tr><td class="aaa" colspan="3">按当前汇率换算结果</td></tr><tr><td id="td21">{{td21}}</td><td>汇率</td><td id="td23">{{td23}}</td></tr><tr><td id="td31">{{td31}}</td><td id="td32">{{td32}}</td><td id="td33">{{td33}}</td></tr></table></div>
</div><script>new Vue({el:"#root",data:{listMoney:['美元', '人民币', '欧元', '日元', '韩元', '港元'],listRate:[1, 7, 0.9 , 100, 1000, 8],select1:0,select2:0,inputStr:'',td21:'美元',td23:'人民币',td31:'100',td32:'7',td33:'700',},methods:{button1:function () {var mid=this.select1this.select1=this.select2this.select2=mid},button2:function () {if (this.inputStr=='') {return}var rate=this.listRate[this.select2]/this.listRate[this.select1]var money=this.inputStr*ratethis.td21=this.listMoney[select1.value]this.td23=this.listMoney[select2.value]this.td31=this.inputStrthis.td32=ratethis.td33=rate*this.inputStr}}})
</script>
</body>
</html>
思路:
1.导入js
2.将整个框架用div包括,id=root 然后通过vue对象获取id
3.利用v-on:click监听button按钮,实现互换和汇率计算功能
4.互换功能的实现为:
双向绑定select的value值,初始化为0(即美元),然后只需要通过修改vue对象里的select值即可实现互换
5汇率计算功能的实现为:
a.将input进行v-model,然后计算rate和money仅仅需要this+属性(方法同day05)即可计算得到
b.利用插值表达式(’{{}}’)改变td的值,就可以改变相对应的内容.