1.用vue以對(duì)象的形式添加刪除元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
h1{
text-align: center;
}
p{
margin-top: 20px;
text-align: center;
font-weight: 600;
}
input{
margin-top: 20px;
width: 1000px;
height: 35px;
margin-left: 20%;
border: 1.5px solid #cccccc;
color: #cccccc;
font-size: 16px;
padding-left: 10px;
}
.btn{
width: 150px;
height: 50px;
margin: 0 auto;
margin-top: 20px;
}
.btn button{
width: 50px;
height: 35px;
margin-left: 15px;
margin-top: 30px;
border-radius: 5%;
border: 0px;
color: white;
}
.btn1{
background: #337ab7;
}
.btn2{
background: #5cb85c;
}
.btn2 a{
color: white;
list-style: none;
text-decoration: none
}
#itany td{
width: 200px;
height: 30px;
border: 1px solid #ccc;
text-align: center;
}
#itany{
margin-left: 20%;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="in">
<h1>添加用戶(hù)</h1>
<p>姓名</p>
<input type="" placeholder="請(qǐng)輸入姓名" v-model="people1.name">
<p>年齡</p>
<input type="" placeholder="請(qǐng)輸入年齡" v-model="people1.age">
<p>郵箱</p>
<input type="" placeholder="請(qǐng)輸入郵箱" v-model="people1.emil">
<div class="btn">
<button class="btn1" v-on:click="atl">添加</button>
<button class="btn2"><a href="">重置</a></button>
</div>
<table id="itany" width="1000px" cellspacing=0>
<thead>
<tr>
<td>序號(hào)</td>
<td>姓名</td>
<td>年齡</td>
<td>郵箱</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr v-for="(val,index) in people">
<td>{{index+1}}</td>
<td>{{val.name}}</td>
<td>{{val.age}}</td>
<td>{{val.emil}}</td>
<td><button v-on:click="remov(index)">刪除</button></td>
</tr>
</tbody>
</table>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".in",
data:{
people:[
{
name:"tom",
age:18,
emil:"tom@126.com"
},
{
name:"iack",
age:19,
emil:"jack@126.com"
},
{
name:"amy",
age:20,
emil:"amy@126.com"
},
],
people1:{name:"",age:"",emil:""}
},
methods:{
atl:function(){
this.people.push(this.people1)
},
remov:function(a){
this.people.splice(a,1)
},
}
})
</script>
</body>
</html>
2.購(gòu)物車(chē)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.in td{
width: 300px;
height: 40px;
border: 1px solid #ccc;
text-align: center;
}
.in{
margin-left: 3%;
margin-top: 100px;
}
.in p{
width: 1510px;
height: 40px;
text-align: center;
line-height: 40px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="in">
<table cellspacing=0>
<thead>
<tr>
<td>編號(hào)</td>
<td>名稱(chēng)</td>
<td>單價(jià)</td>
<td>數(shù)量</td>
<td>總價(jià)</td>
</tr>
</thead>
<tbody>
<tr v-for="(val,index) in fruit">
<td>{{index+1}}</td>
<td>{{val.name}}</td>
<td>{{val.priec}}</td>
<td><button v-on:click="alt(index)"> + </button>{{val.num}}<button v-on:click="alt1(index)"> - </button></td>
<td>{{val.add}}</td>
</tr>
</tbody>
</table>
<p>總計(jì)：{{total}}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".in",
data:{
fruit:[
{name:"香蕉",priec:1,num:0,add:0},
{name:"蘋(píng)果",priec:2,num:0,add:0},
{name:"鴨梨",priec:3,num:0,add:0},
],
total:0
},
methods:{
alt:function(index){
this.fruit[index].num++
this.fruit[index].add=Number(this.fruit[index].num)*Number(this.fruit[index].priec)
this.total+=this.fruit[index].priec
} ,
alt1:function(index){
if(this.fruit[index].num>1){
this.fruit[index].num--
this.fruit[index].add=Number(this.fruit[index].num)*Number(this.fruit[index].priec)
this.total-=this.fruit[index].priec
}
}
}
})
</script>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
