版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_38454165/article/details/82590542
利用vue框架模拟购物车的实现：
<!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>
<style>
table {width: 100%; border-collapse: collapse;}
td {padding: 10px;}
tr:first-child { border-top: orange 2px solid;}
tr:last-child { border-bottom: orange 2px solid;}
.lv1{background-color: red; color:white;}
.lv2{background-color: orange;color:white;}
.lv3{background-color: green;color:white;}
table span {color: red;}
td:last-child {width: 300px;}
</style>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<form action="aaa">
<table >
<tbody>
<tr>
<td>用户名</td>
<td><input type="text" @blur="checkUname()" v-model:value="username.uvalue" ></td>
<td><span >{{username.usernameMsg}}</span></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" @blur="checkUpwd()" v-model:value="password.pvalue"></td>
<td><span >{{password.passwordMsg}}</span></td>
</tr>
<tr>
<td><input type="button" :disabled="code.d" @click="codeClick()" v-model:value="code.cvalue" ></td>
<td><input type="text" id="code"></td>
<td><span >{{code.codeMsg}}</span></td>
</tr>
<tr>
<td><input type="checkbox" v-model:checked="agree.c"> 同意"服务条款"和"隐私权相关政策"</td>
<td></td>
<td><span >{{agree.agreeMsg}}</span></td>
</tr>
</tbody>
</table>
<br>
<input type="submit" value="注册" @click="submit()">
</form>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
username:{uvalue:"",usernameMsg:"",uok:false},
password:{pvalue:"",passwordMsg:"",pok:false},
code:{cvalue:"点击获取验证码",codeMsg:"",d:false},
agree:{agreeMsg:"",c:true},
time:5,
},
methods:{
submit:function(){
this.checkUname();
this.checkUpwd();
if(!this.agree.c){
this.agree.agreeMsg="必须同意";
}
if(this.username.uok &this.password.pok& this.agree.c){
}else{
event.preventDefault();
}
},
checkUname:function () {
//console.log("nsdigsh");
if(this.username.uvalue == ""){
this.username.usernameMsg = "用户名不能为空";
}else if(this.username.uvalue.length < 3){
this.username.usernameMsg = "用户名长度必须大于3";
}else{
this.username.uok = true;
this.username.usernameMsg = "";
}
},
checkUpwd:function () {
var pok = false;
if (this.password.pvalue == "") {
this.password.passwordMsg = "密码不能为空";
} else if (this.password.pvalue.length < 6) {
this.password.passwordMsg = "密码长度必须大于6";
} else{
this.password.pok = true;
var lv = 0 ;
var p = this.password.pvalue;
var reg = /[0-9]+/;
var reg2 = /[a-zA-Z]+/;
var reg3 = /[^0-9a-zA-Z]+/;
if(reg.test(p)){
lv++;
}
if(reg2.test(p)){
lv++;
}if(reg3.test(p)){
lv++;
}
console.log(lv);
if(lv == 3){
this.password.passwordMsg = "密码安全等级：高"
}else if(lv == 2){
this.password.passwordMsg = "密码安全等级：中"
}else if(lv == 1){
this.password.passwordMsg = "密码安全等级：低"
}
};
},
codeClick:function () {
setTimeout(this.timeOut,500);
},
//setTimeout方法使用时不能传参和加括号，否则就不会有延迟效果
timeOut:function () {
this.code.codeMsg="验证码已发送";
console.log(this.time);
this.time--;
this.code.cvalue = ""+this.time+"秒后重新发送";
if(this.time>0){
setTimeout(this.timeOut,1000);
this.code.d = true;
}else{
this.code.d = false;
this.code.cvalue = "点击获取验证码"
this.time = 5;
this.code.codeMsg="";
}
},
},
})
</script>
</body>
</html>