添加列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="bootcss/css/bootstrap.css"/>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
input{
width: 100%;
height: 33px;
border-radius: 5px;
font-size: 8px;
}
p{
margin-top: 25px;
}
.box{
margin-top: 20px;
}
tr{
height:40px;
}
</style>
</head>
<body>
<div class="container" id="itany">
<h1 class="text-center">添加用户</h1>
<p>姓名</p>
<input type="text" v-model="str" placeholder="请输入姓名">
<p>年龄</p>
<input type="text" v-model="ben" placeholder="请输入年龄">
<p>邮箱</p>
<input type="text" v-model="sen" placeholder="请输入邮箱">
<div class="box text-center">
<button class="btn btn-primary" v-on:click="add">添加</button>
<button class="btn btn-success">重置</button>
</div>
<table border="" cellspacing="" cellpadding="" width="100%" style="text-align: center;">
<tr>
<td v-for='val in arrs'>{{val}}</td>
</tr>
<tr v-for='(v,index) in arr'>
<td>{{v.num}} </td>
<td>{{v.name}}</td>
<td>{{v.old}}</td>
<td>{{v.email}}</td>
<td><button v-on:click="the(index)">删除</button></td>
</tr>
</table>
</div>
<script>
new Vue({
el:'#itany',
data:{
arrs:['序号','姓名','年龄','邮箱','操作'
],
arr:
[
{num:'1',name:'tom',old:'18',email:'tom@126.com'},
{num:'2',name:'jack',old:'19',email:'jack@126.com'},
{num:'3',name:'amy',old:'20',email:'amy@126.com'}
],
str:'',
ben:'',
sen:'',
},
methods:{
add:function(){
this.arr.push({ num:this.arr.length+1,name:this.str,old:this.ben,email:this.sen})
this.str="";
this.ben="";
this.sen=""
},
the:function(ind){
this.arr.splice(ind,1)
}
}
})
</script>
</body>
</html>
购物
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<style type="text/css">
table{text-align: center;
width: 500px;height: 200px;
margin: 0 auto;}
</style>
</head>
<body>
<div id="box">
<table border="" cellspacing="0" cellpadding="">
<tr>
<th v-for='val in arrs'>{{val}}</th>
</tr>
<tr v-for="(v,index) in arr">
<td>{{v.num}}</td>
<td>{{v.name}}</td>
<td>{{v.dan}}</td>
<td><button v-on:click="ban(index)">+</button>{{v.shu}} <button v-on:click="ben(index)">-</button></td>
<td>{{v.dan*v.shu}}</td>
</tr>
<tr>
<td colspan="5">
{{zong}}
</td>
</tr>
</table>
</div>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
arrs:['编号','名称','单价','数量','总价'
],
arr:[
{num:1,name:'香蕉',dan:1,shu:5},
{num:2,name:'苹果',dan:2,shu:14},
{num:3,name:'鸭梨',dan:3,shu:1}
],
zong:'36'
},
methods:{
ban:function(index){
this.arr[index].shu++;
var a=this.arr[0].shu*this.arr[0].dan;
var b=this.arr[1].shu*this.arr[1].dan;
var c=this.arr[2].shu*this.arr[2].dan;
var d=a+b+c
this.zong=d
},
ben:function(index){
this.arr[index].shu--
if(this.arr[index].shu==-1){
this.arr[index].shu=0
}
var a=this.arr[0].shu*this.arr[0].dan;
var b=this.arr[1].shu*this.arr[1].dan;
var c=this.arr[2].shu*this.arr[2].dan;
var d=a+b+c;
this.zong=d;
}
}
})
</script>
</body>
</html>
选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<style type="text/css">
*{
margin: 0;
padding:0 ;
}
#app{
float: left;
border: 1px solid;
width: 118px;
height: 30px;
text-align: center;
}
#box{
width: 358px;
height: 200px;
border: 1px solid red;
text-align: center;
}
p{
line-height: 200px;
font-size:20px ;
color: red;
}
</style>
<body>
<div id="itany">
<div>
<div v-for="(val,index) in arr" id="app" >
<a v-on:click="add(index)">{{val.name}}</a>
</div>
<div id="box" v-for="(v,index) in arr"v-show="v.see" >
{{v.title}}
</div>
</div>
</div>
<script type="text/javascript">
new Vue({
el:'#itany',
data:{
arr:[{name:'选项一',see:true,title:'选择选项一'},{name:'选项二',see:false,title:'选择选项二'},{name:'选项三',see:false,title:'选择选项三'}]
},
methods:{
add:function(ind){
for(var i=0;i<this.arr.length;i++){
this.arr[i].see=false;
if(i==ind){
this.arr[i].see=true;
}
}
}
}
})
</script>
</body>
</html>
网友评论