案例一：任务列表
<!DOCTYPE html>
<html>
<head>
<title>ceshi</title>
<script src="vue.js"></script>
<style type="text/css">
.span{
color: skyblue;
}
ul{
list-style: none;
}
.finsh{
color:#ccc;
text-decoration: line-through;
}
</style>
</head>
<body>
<div id="box">
<h2>任务列表</h2>
<p>任务数：{{arr.length}}个，目前还有{{choose2()}}个任务未完成，<span class="span" @click="choose3()">完成</span></p>
<ul>
<li v-for="(item,index) in arr" v-bind:class="{finsh:item.bol}">
<input type="checkbox" v-model="item.bol"></input>
<span v-show="!item.boll" @dblclick="yc(index)">{{item.des}}</span>
<span v-show="item.boll"><input type="text" @dblclick="yc(index)" v-model="item.des"></input></span>
</li>
</ul>
<input type="text" v-model="msg"></input>
<button v-on:click="addRW()">添加</button>
</div>
</body>
<script>
var vm = new Vue({
el:"#box",
data:{//变量
msg:'',
isShow:false,
arr:[{des:'豪哥吃饭',bol:false,boll:false},{des:'豪哥吃尘',bol:false,boll:false},{des:'豪哥吃番薯',bol:false,boll:false}]
},
methods:{//添加方法
addRW:function(){
this.arr.push({des:this.msg,bol:false});
},//判断还有多少个未完成
choose2:function(){
var num=this.arr.length;
this.arr.forEach(function(item){
if (item.bol) {
console.log(item.bol);
num--;
}
})
return num;
},
choose3:function(){
for (let i=this.arr.length-1;i>=0;i--){
if(this.arr[i].bol){
this.arr.splice(i,1);
}
}
},yc:function(index){
this.arr[index].boll=!this.arr[index].boll;
}
}
});
</script>
</html>
案例二：购物车
<!DOCTYPE html>
<html>
<head>
<title>ceshi</title>
<script src="vue.js"></script>
<style type="text/css">
ul{
list-style: none;
}
</style>
</head>
<body>
<div id="box">
<table>
<tr>
<td>商品名称</td>
<td>商品单价</td>
<td>商品数量</td>
<td>操作</td>
</tr>
<tr v-for="(item,index) in arr">
<td>{{index+1}}</td>
<td>{{item.xh}}</td>
<td>{{item.jg}}</td>
<td><button @click="jian(index)">-</button>{{item.count}}<button @click="zeng(index)">+</button></td>
<td><button @click="delete1(index)">移除</button></td>
</tr>
</table>
<p>总价：￥{{totalPrice()}}</p>
</body>
<script>
var vm =new Vue({
el:"#box",
data:{
arr:[{xh:'Iphone X',jg:7999,count:1},{xh:'荣耀 10',jg:2399,count:1},{xh:'华为P20',jg:3399,count:1},{xh:'小米 8',jg:3999,count:1}]
},
methods:{
jian:function(index){
if (this.arr[index].count>1) {
this.arr[index].count-=1;
}
},
zeng:function(index){
this.arr[index].count+=1;
},
delete1:function(index){
this.arr.splice(index,1);
},
totalPrice:function(item){
let num=0;
this.arr.forEach(function(item){
num+=item.jg*item.count
});
return num;
}
}
});
</script>
</html>
案例三：学生录入系统
<!DOCTYPE html>
<html>
<head>
<title>ceshi</title>
<script src="vue.js"></script>
<style type="text/css">
ul{
list-style: none;
}
</style>
</head>
<body>
<div id="box1">
<div>
<h3>学生录入系统列表</h3>
姓名：<input type="text" v-model="userName"/><span>{{nameTis}}</span></br>
年龄：<input type="text" v-model="userAge"/><span>{{ageTis}}</span></br>
性别：<select><option value="男">男</option><option value="女">女</option></select></br>
手机：<input type="text" v-model="userTelephone"/><span>{{phoneTis}}</span></br>
<button @click="createUser">创建新用户</button>
</div>
</br></br></br></br></br>
<div>
<table>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>手机</td>
<td>删除</td>
</tr>
<tr v-for="(user,index) in users">
<td>{{user.name}}</td>
<td>{{user.sex}}</td>
<td>{{user.age}}</td>
<td>{{user.telephone}}</td>
<td><button @click="deleteUser(index)">删除</button></td>
</tr>
</table>
</div>
</div>
</body>
<script>
var vm =new Vue({
el:"#box1",
data:{
users:[{name:"方君昊",sex:"男",age:20,telephone:"15473124380"},
{name:"侨兴宜",sex:"女",age:21,telephone:"15612377521"},
{name:"方天择",sex:"男",age:20,telephone:"15521653432"},
{name:"存金通",sex:"男",age:20,telephone:"13212246232"}],
nameTis:'',
ageTis:'',
phoneTis:'',
userName:'',
userAge:'',
userSex:'',
userTelephone:'',
},
methods:{
createUser:function(){
if (this.userName.length<2||this.userName.length>6) {
this.nameTis="2-6个字";
}else{
this.nameTis='';
}
if (parseInt(this.userAge)<=0||parseInt(this.userAge)>150) {
this.ageTis="年龄必须大于0或则小于150岁"
}else{
this.ageTis='';
}
if (this.userTelephone.length!=11) {
this.phoneTis="请输入正确的手机号码"
}else{
this.phoneTis='';
}
if (this.nameTis==''&&this.ageTis==''&&this.phoneTis=='') {
this.users.push({name:this.userName,sex:this.userSex,age:parseInt(this.userAge),telephone:this.userTelephone});
}
},
deleteUser:function(index){
this.users.splice(index,1);
}
}
});
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<title>ceshi</title>
<script src="vue.js"></script>
<style type="text/css">
ul{
list-style: none;
}
</style>
</head>
<body>
<div id="box1">
<div>
<h3>学生录入系统列表</h3>
姓名：<input type="text" v-model="userName"/><span>{{nameTis}}</span></br>
年龄：<input type="text" v-model="userAge"/><span>{{ageTis}}</span></br>
性别：<select><option value="男">男</option><option value="女">女</option></select></br>
手机：<input type="text" v-model="userTelephone"/><span>{{phoneTis}}</span></br>
<button @click="createUser">创建新用户</button>
</div>
</br></br></br></br></br>
<div>
<table>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>手机</td>
<td>删除</td>
</tr>
<tr v-for="(user,index) in users">
<td>{{user.name}}</td>
<td>{{user.sex}}</td>
<td>{{user.age}}</td>
<td>{{user.telephone}}</td>
<td><button @click="deleteUser(index)">删除</button></td>
</tr>
</table>
</div>
</div>
</body>
<script>
var vm =new Vue({
el:"#box1",
data:{
users:[{name:"方君昊",sex:"男",age:20,telephone:"15473124380"},
{name:"侨兴宜",sex:"女",age:21,telephone:"15612377521"},
{name:"方天择",sex:"男",age:20,telephone:"15521653432"},
{name:"存金通",sex:"男",age:20,telephone:"13212246232"}],
nameTis:'',
ageTis:'',
phoneTis:'',
userName:'',
userAge:'',
userSex:'',
userTelephone:'',
},
methods:{
createUser:function(){
if (this.userName.length<2||this.userName.length>6) {
this.nameTis="2-6个字";
}else{
this.nameTis='';
}
if (parseInt(this.userAge)<=0||parseInt(this.userAge)>150) {
this.ageTis="年龄必须大于0或则小于150岁"
}else{
this.ageTis='';
}
if (this.userTelephone.length!=11) {
this.phoneTis="请输入正确的手机号码"
}else{
this.phoneTis='';
}
if (this.nameTis==''&&this.ageTis==''&&this.phoneTis=='') {
this.users.push({name:this.userName,sex:this.userSex,age:parseInt(this.userAge),telephone:this.userTelephone});
}
},
deleteUser:function(index){
this.users.splice(index,1);
}
}
});
</script>
</html>
789
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
