购物车
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>购物车</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!--购物车表格-->
<table border="1" width="100%">
<thead>
<tr>
<!--v_model表示双向绑定，数据会影响视图，视图也会影响数据-->
<td><input type="checkbox" v-model:checked="checkAll" @click="selectAll()">全选</td>
<td>编号</td>
<td>名称</td>
<td>价格</td>
<td>数量</td>
<td>图片</td>
<td>移除</td>
</tr>
</thead>
<tbody>
<tr v-for="(p, i) in list">
<td><input type="checkbox" v-model:checked="p.c" @click="select(i)"></td>
<td>{{i+1}}</td>
<td>{{p.name}}</td>
<td>{{p.price}}</td>
<td>
<input type="button" value="-" @click="minus(i)">
<input type="number" v-model:value="p.count" @blur="change(i)">
<input type="button" value="+" @click="add(i)">
</td>
<td><img width="100" :src="'../images/' + p.img"></td>
<td><input type="button" value="删除" @click="remove(i)"></td>
</tr>
</tbody>
<tfoot>
<td colspan="7">总价<span>{{total}}</span></td>
</tfoot>
</table>
<!--商品表格-->
<table>
<tbody>
<tr v-for="(p, i) in products">
<td>{{p.name}}</td>
<td>{{p.price}}</td>
<td><img width="50" :src="'../images/'+p.img"></td>
<td><input type="button" value="添加至购物车" @click="addGoods(i)"></td>
</tr>
</tbody>
</table>
</div>
<script>
var vue = new Vue({
//将视图与dom元素绑定
el:"#app",
//自几的数据
data:{
total:0.0,//总价
checkAll:true,//全选按钮
list:[ /* 购物车商品*/
{name:"商品1", price:3000.00, img:"5a0cf6bfN92a5a597.jpg",title:"提示1!!!!!!!!!!!!!!", count:1, c:true},
{name:"商品2", price:4000.00, img:"5a0cf672N3c785b7a.jpg",title:"提示2!!!!!!!!!!!!!!", count:1, c:true},
{name:"商品3", price:2000.00, img:"5a1f5ed3Nfa577958.jpg",title:"提示3!!!!!!!!!!!!!!", count:1, c:true}
],
products:[//商品列表
{name:"商品1", price:3000.00, img:"5a0cf6bfN92a5a597.jpg",title:"提示1!!!!!!!!!!!!!!"},
{name:"商品2", price:4000.00, img:"5a0cf672N3c785b7a.jpg",title:"提示2!!!!!!!!!!!!!!"},
{name:"商品3", price:2000.00, img:"5a1f5ed3Nfa577958.jpg",title:"提示3!!!!!!!!!!!!!!"},
{name:"商品4", price:2000.00, img:"5a1f5664Nfa934fac.jpg",title:"提示3!!!!!!!!!!!!!!"},
{name:"商品5", price:2000.00, img:"5a1fd0c4N73c671f2.jpg",title:"提示3!!!!!!!!!!!!!!"},
{name:"商品6", price:2000.00, img:"5a2b4fffN4b32a616.jpg",title:"提示3!!!!!!!!!!!!!!"}
],
},
//用于放我们自己写的方法
methods:{
//修改数量
change:function(i){
console.log(this.list[i].count );
this.sum();
},
//全选
selectAll:function(){
if(!this.checkAll){//因为点击事件时候状态和点击完时相反，所以取反
for(var i=0;i<this.list.length;i++){
this.list[i].c = true;
}
}else{
for(var i=0;i<this.list.length;i++){
this.list[i].c = false;
}
}
this.sum();
},
//选择
select:function(i){
//console.log(this.list[i].c);
this.list[i].c = !this.list[i].c;
//console.log(this.list[i].c);
this.sum();
//有一个取消勾选就取消勾选全选按钮
if(!this.list[i].c){
this.checkAll = false;
}
},
//将当前商品移除
remove:function (i) {
this.list.splice(i,1);
this.sum();
},
//增加购买数量
add:function (i) {
this.list[i].count++
this.sum();
},
//将数量减一
minus:function (i) {
if(this.list[i].count == 1){
}else{
this.list[i].count--;
}
this.sum();
},
//计算总价
sum:function () {
this.total = 0.0;
for (var i = 0; i <this.list.length ; i++) {
if(this.list[i].c ){//是否勾选
this.total += this.list[i].price * this.list[i].count;
}
}
},
//添加商品至购物车
addGoods:function (i) {
var goods = this.products[i];
var find = false;
for (var j = 0; j < this.list.length; j++) {
if(this.list[j].name == goods.name){
this.list[j].count ++;
find = true;
break;
}
}
if(!find){
this.list.push({name:goods.name,price:goods.price,img:goods.img,title:goods.title,count:1,c:true});
}
this.sum();
}
},
//在vue对象初始化完成后会调用mounted方法
//vue的方法，写在methods外
mounted:function () {
this.sum();
},
});
</script>
</body>
</html>结果展示：
表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
td{padding: 10px}
#uMsg1{color: orangered}
#pMsg2{color: orangered}
</style>
</head>
<body>
<div id="app2">
<form action="">
<table>
<tbody>
<tr>
<td>用户名</td>
<td><input type="text" id="username" @blur="usercheck" v-model:value="u.userv"></td>
<td><span id="uMsg1">{{u.usermsg}}</span></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" id="password" @blur="passwdcheck" v-model:value="u.pswdv"></td>
<td><span id="pMsg2">{{p.pswdmsg}}</span></td>
</tr>
<tr>
<td><input type="button" :disabled="code.d" id="codeBtn" @click="yan" v-model:value="code.codev" ></td>
<td><input type="text" id="code"></td>
</tr>
<tr>
<td><input type="checkbox" id="agree"> 同意"服务条款"和"隐私权相关政策"</td>
<td></td>
<td><span id="agreeMsg">{{agree.amsg}}</span></td>
</tr>
</tbody>
</table>
<p><input type="submit" value="提交" @click="tijiao"><span></span></p>
</form>
</div>
<script>
var vue = new Vue({
el:"#app2",
data:{
u:{
userv:"",
usermsg:"",
u_flag:false
},
p:{
pswdv:"",
pswdmsg:"",
p_flag:false
},
agree:{
amsg:"",
c:true
},
code:{
codev:"点击获取验证码",
d:false,
},
time:10,
},
methods:{
usercheck: function () {
if(this.u.userv.length == 0){
this.u.usermsg = "账号不能为空";
}else if (this.u.userv.trim().length <2){
this.u.usermsg = "账号长度不得小于2";
} else{
this.u.u_flag = true;
this.u.usermsg = "";
}
},
passwdcheck: function () {
var v= this.u.pswdv.trim();
console.log(v);
if(v.length == 0){
this.p.pswdmsg = "密码不能为空";
console.log(this.p.pswdmsg);
return;
}
var count = 0;
if(/[0-9]/.test(v)) {
count++; // 计数加1
}
if(/[A-Za-z]/.test(v)) {
count++; // 计数加1
}
if(/[^0-9A-Za-z]/.test(v)) {
count++;
}
if(count == 3 && v.length>=6) {
// 高强度
this.p.pswdmsg = "高强度";
this.p.p_flag = true;
} else if(count == 2 && v.length>=6) {
// 中强度
this.p.pswdmsg = "中强度";
this.p.p_flag = true;
} else {
// 低强度l
this.p.pswdmsg = "低强度";
this.p.p_flag = true;
}
},
tijiao:function () {
this.usercheck();
this.passwdcheck();
if(!this.agree.c){
this.agree.amsg="必须同意";
}
if(this.u.u_flag &this.p.p_flag& this.agree.c){
alert("提交成功");
}else{
alert("提交失败");
event.preventDefault();
}
},
yan:function () {
setTimeout(this.timeOut,500);
},
//setTimeout方法使用时不能传参和加括号，否则就不会有延迟效果
timeOut:function () {
this.time--;
this.code.codev = ""+this.time+"秒后重新发送";
if(this.time>0){
setTimeout(this.timeOut,1000);
this.code.d = true;
}else{
this.code.d = false;
this.code.codev = "点击获取验证码"
this.time = 10;
}
},
}
});
</script>
</body>
</html>