1.用戶管理
div部分，用bootstrap來寫
<div class='container'>
<form action="">
<div class='form-group'>
<label for="">用戶名</label>
<input type="text" class='form-control' placeholder="請輸入用戶名" v-model="student.uname">
</div>
<div class='form-group'>
<label for="">密碼</label>
<input type="text" class='form-control' placeholder="請輸入密碼" v-model="student.pass">
</div>
<div class='form-group'>
<label for="">郵箱</label>
<input type="text" class='form-control' placeholder="請輸入郵箱" v-model="student.email">
</div>
<div class='form-group text-center'>
<input type="text" class='btn btn-success' value='添加' @click='add'>
<input type="text" class='btn btn-info' value='重置'>
</div>
</form>
<table class='table table-bordered'>
<thead>
<tr>
<th>編號</th>
<th>姓名</th>
<th>密碼</th>
<th>郵箱</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(value,index) in user">
<td>{{index+1}}</td>
<td>{{value.uname}}</td>
<td>{{value.pass}}</td>
<td>{{value.email}}</td>
<td>
<button @click='delt(index)'>刪除</button>
</td>
</tr>
</tbody>
</table>
</div>
JS部分
<script src='../js/vue.js'></script>
<script>
new Vue({
el:'.container',
data:{
user:[
{uname:'jack',pass:'123456',email:'123@126.com'},
{uname:'rose',pass:'789456',email:'456@126.com'},
{uname:'tom',pass:'456321',email:'789@126.com'}
],
student:{}
},
methods:{
add:function(){
//淺克隆
var newstu={}
for(var i in this.student){
newstu[i]=this.student[i]
}
this.user.push(this.student);
//this.student={}
},
delt:function(ind){
this.user.splice(ind,1)
}
}
})
</script>
Image 3.png
2.購物車
div部分，用bootstrap來寫
<div class='container'>
<table class='table table-bordered text-center'>
<thead>
<tr>
<th class="text-center">編號</th>
<th class="text-center">名稱</th>
<th class="text-center">單價</th>
<th class="text-center">數量</th>
<th class="text-center">小計</th>
</tr>
</thead>
<tbody>
<tr v-for="(value,index) in list">
<td>{{index+1}}</td>
<td>{{value.pname}}</td>
<td>{{value.price}}</td>
<td>
<button @click='add(index)'>+</button>
<span>{{value.count}}</span>
<button @click='redu(index)'>-</button>
</td>
<td>{{value.sub}}</td>
</tr>
<tr>
<td colspan="5">總價：￥{{sum}}</td>
</tr>
</tbody>
</table>
</div>
JS部分
<script src='../js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:'.container',
data:{
list:[
{pname:'apple',price:3,count:2,sub:6},
{pname:'pear',price:4,count:3,sub:12},
{pname:'banana',price:5,count:4,sub:20}
],
sum:0
},
methods:{
add:function(ind){
//數量
this.list[ind].count++;
//改變小計
this.list[ind].sub=this.list[ind].count*this.list[ind].price;
this.total();
},
redu:function(ind){
//數量
if(this.list[ind].count>1){
this.list[ind].count--;
}
//小計
this.list[ind].sub=this.list[ind].count*this.list[ind].price;
this.total();
},
total:function(){
for(var i=0,tota=0;i<this.list.length;i++){
tota+=this.list[i].sub
}
this.sum=tota
}
}
})
</script>
效果如下：
Image 5.png
3.選項卡
用v-show實現
樣式
<style>
li{
list-style: none;
width: 100px;
height: 20px;
border: 1px #000000 solid;
}
.txt li{
float: left;
cursor: pointer;
}
.clearfix:before,
.clearfix:after{
content: "";
display: block;
clear: both;
}
</style>
div部分
<div id="itany">
<ul class="txt">
<li v-for="(value,index) in card" @click="chg(index)">{{value.title}}</li>
</ul>
<ul>
<li v-for='(value,index) in card' v-show='value.flag' class="clearfix">{{value.content}}</li>
</ul>
</div>
JS部分
<script src="../js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
card:[
{title:'選項卡1',content:'11111111111111111',flag:true},
{title:'選項卡2',content:'22222222222222222',flag:false},
{title:'選項卡3',content:'33333333333333333',flag:false}
]
},
methods:{
chg:function(ind){
for(var i=0;i<this.card.length;i++){
this.card[i].flag=false;
}
this.card[ind].flag=true;
}
}
})
</script>
效果如圖：
Image 7.png
