shopcar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<script type="text/javascript" src="js/vue.js"></script>
<div id="box">
<table border=1>
<tr>
<td>        </td>
<td>商品名称</td>
<td>商品单价</td>
<td>商品数量</td>
<td>操作</td>
</tr>
<tr v-for="(item,index) in arr">
<td>{{index+1}}</td>
<td v-model="item.name">{{item.name}}</td>
<td v-model="item.price">{{item.price}}</td>
<td><button @click="jian(index)">-</button><span v-model="item.sold">{{item.sold}}</span><button @click="jia(index)">+</button></td>
<td><button @click="dele(index)">移除</button></td>
</tr>
</table>
<span>总计:¥{{sum()}}</span>
</div>
<script>
var vm = new Vue({
el:'#box',
data:{
total:0,
arr:[{id:1,name:"iPhoneX",price:7999,sold:1},
{id:2,name:"荣耀 10",price:2399,sold:1},
{id:3,name:"华为P20",price:3399,sold:1},
{id:4,name:"小米 8",price:3399,sold:1}]
},
methods:{
jian:function(index){
if (this.arr[index].sold>0) {
this.arr[index].sold-=1;
}
},
jia:function(index){
this.arr[index].sold+=1;
},
sum:function(){
let sum = 0;
this.arr.forEach(function(item){
sum += item.price*item.sold;
});
return sum;
},
dele:function(index){
this.arr.splice(index,1);
}
}
})
</script>
</body>
</html>
学生注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
.span1{
color:red;
}
</style>
</head>
<body>
<script type="text/javascript" src="js/vue.js"></script>
<div id="box">
<h3>学生信息录入系统</h3>
<div>
<span>姓名:</span>
<input type="text" v-model="name1" @blur="name_blur" placeholder="请输入名字">
<span v-show="name1err" class="span1">4到16位(字母,数字,下划线)</span>
</div>
<div>
<span>年龄:</span>
<input type="text" v-model="age" @blur="age_blur">
<span v-show="ageerr" class="span1">年龄在0~100之间</span>
</div>
<div>
<span>性别:</span>
<select v-model="sex">
<option value="男" >男</option>
<option value="女" >女</option>
</select>
</div>
<div>
<span>手机:</span>
<input type="text" @blur="phone_blur" v-model="phone" placeholder="请输入手机号">
<span v-show="phoneerr" class="span1">手机号必须为11位</span>
</div>
<div>
<button @click="addStudent">创建新用户</button>
</div>
<br/>
<br/>
<div id="box2">
<table border=1>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>手机</td>
<td>删除</td>
</tr>
<tr v-for="(item,index) in arr">
<td>{{item.name}}</td>
<td>{{item.sex}}</td>
<td>{{item.age}}</td>
<td>{{item.phone}}</td>
<td><button @click="dele(index)">删除</button></td>
</tr>
</table>
</div>
</div>
<script>
var vm = new Vue({
el:'#box',
data:{
name1err:false,
ageerr:false,
phoneerr:false,
name1:'',
sex:"男",
age:22,
phone:'',
arr:[{id:0,name:'方君昊',sex:'男',age:20,phone:"15473124380"},
{id:0,name:'乔向雁',sex:'女',age:22,phone:"15373124380"},
{id:0,name:'鲁傲柔',sex:'男',age:23,phone:"15273124380"},
{id:0,name:'寸琴韵',sex:'女',age:21,phone:"15173124380"}],
},
methods:{
addStudent:function(){
if(this.name1==""||this.sex==""||this.age==0||this.phone==""||this.name1err==true||this.ageerr==true||this.phoneerr==true){
alert("注册不允许有空值!");
}else{
this.arr.push({id:0,name:this.name1,sex:this.sex,age:this.age,phone:this.phone});
}
},
name_blur:function(){
if (this.name1.length>16||this.name1.length<4) {
this.name1err=true;
}else{
this.name1err=false;
}
},
age_blur:function(){
if (this.age>0&&this.age<130) {
this.ageerr=false;
}else{
this.ageerr=true;
}
},
phone_blur:function(){
if (this.phone.length==11) {
this.phoneerr=false;
}else{
this.phoneerr=true;
}
},
dele:function(index){
this.arr.splice(index,1);
}
}
})
</script>
</body>
</html>
TODOList
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<style>
ul{
list-style: none;
}
.span{
color:skyblue;
}
.finsh{
color:#ccc;
text-decoration: line-through;
}
</style>
</head>
<body>
<script type="text/javascript" src="js/vue.js"></script>
<div id="box">
<h1>任务标题</h1>
<p>任务数{{arr.length}},未完成{{choose2()}}<span class="span" @click="dele">【完成】</span></p>
<ul>
<li v-for="(item,index) in arr" v-bind:class="{finsh:item.bol}">
<div v-if="item.falg">
<input type="checkbox" v-model="item.bol"/>
<span @click="jiaodain(index)">{{item.des}}</span>
</div>
<input v-else type="text" v-model="item.des" @blur="shiqujiaodian(index)"/>
</li>
</ul>
<input type="text" v-model="msg"><button @click="add">添加</button>
</div>
<script>
var vm = new Vue({
el:"#box",
data:{
msg:"",
arr:[{des:'jin',bol:false,falg:true},
{des:'qian',bol:false,falg:true},
{des:'wang',bol:false,falg:true}],
flag:false,
},
methods:{
choose2:function(){
let num =0;
this.arr.forEach(function(item){
if (!item.bol) {
num++;
}
})
return num;
},
add:function(){
this.arr.push({des:this.msg,bol:false,falg:true});
this.msg="";
},
jiaodain:function(index){
this.arr[index].falg=!this.arr[index].falg;
},
shiqujiaodian:function(index){
this.arr[index].falg=!this.arr[index].falg;
},
dele:function(){
let dele = [];
for(let i=0;i<this.arr.length;i++){
if (this.arr[i].bol) {
dele.push(i);
}
};
for(let i=dele.length-1;i>=0;i--){
console.log(dele[i])
this.arr.splice(dele[i],1);
}
}
}
})
</script>
</body>
</html>