PIXNET Logo登入

Bug倉庫 // 程式日記

跳到主文

Bug倉庫 // 程式日記已經搬家到 https://bugswarehouse.blogspot.tw/ 了喔

部落格全站分類：數位生活

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 9月 14 週四 201700:07

  • 使用vue切換class


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: #0a0;
}
.red{
background-color: #a00;
}
</style>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="addClass" >
<div class="{{addClass? 'red' : ''}} box"></div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data:{
addClass:false,
}
})
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：Vue.js
▲top
  • 9月 14 週四 201700:07

  • 使用vue切換class


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: #0a0;
}
.red{
background-color: #a00;
}
</style>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="addClass" >
<div class="{{addClass? 'red' : ''}} box"></div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data:{
addClass:false,
}
})
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(60)

  • 個人分類：Vue.js
▲top
  • 9月 13 週三 201723:29

  • 可篩選的會員清單，也可選取會員到另一個清單（陣列使用id叫出編號）


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<div class="col-xs-12 col-sm-6">
<h1>全部會員</h1>
<input type="text" v-model="search">
<div v-for='person in people | filterBy search'>
<img :src="person.picture.thumbnail">
{{person.name.first}}{{person.name.last}}
<button @click='addPerson(person)'>加到列表</button>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<h1>選取會員</h1>
<div v-for='(id,person) in selectPeople'>
{{id}}
<img :src="person.picture.thumbnail">
{{person.name.first}}{{person.name.last}}
</div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data:{
people:null,
search:'',
selectPeople:[]
},
created:function(){
this.getData();
},
methods:{
getData:function(){
// GET /someUrl
this.$http.get('https://api.randomuser.me/?results=50').then(response => {
// get body data
this.people = response.body.results;
}, response => {
// error callback
});
},
addPerson:function(person){
this.selectPeople.push(person);
}
}
});
Vue.config.devtools = true;
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：Vue.js
▲top
  • 9月 13 週三 201723:29

  • 可篩選的會員清單，也可選取會員到另一個清單（陣列使用id叫出編號）


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<div class="col-xs-12 col-sm-6">
<h1>全部會員</h1>
<input type="text" v-model="search">
<div v-for='person in people | filterBy search'>
<img :src="person.picture.thumbnail">
{{person.name.first}}{{person.name.last}}
<button @click='addPerson(person)'>加到列表</button>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<h1>選取會員</h1>
<div v-for='(id,person) in selectPeople'>
{{id}}
<img :src="person.picture.thumbnail">
{{person.name.first}}{{person.name.last}}
</div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data:{
people:null,
search:'',
selectPeople:[]
},
created:function(){
this.getData();
},
methods:{
getData:function(){
// GET /someUrl
this.$http.get('https://api.randomuser.me/?results=50').then(response => {
// get body data
this.people = response.body.results;
}, response => {
// error callback
});
},
addPerson:function(person){
this.selectPeople.push(person);
}
}
});
Vue.config.devtools = true;
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(18)

  • 個人分類：Vue.js
▲top
  • 9月 13 週三 201723:12

  • 使用vue source去抓randowuser裡面的資料，並有搜尋框可以篩選這些user


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="search">
<div v-for='person in people | filterBy search'>
<img :src="person.picture.thumbnail">
{{person.name.first}}{{person.name.last}}
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data:{
people:null,
search:''
},
created:function(){
this.getData();
},
methods:{
getData:function(){
// GET /someUrl
this.$http.get('https://api.randomuser.me/?results=50').then(response => {
// get body data
this.people = response.body.results;
}, response => {
// error callback
});
}
}
});
Vue.config.devtools = true;
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(64)

  • 個人分類：Vue.js
▲top
  • 9月 13 週三 201723:12

  • 使用vue source去抓randowuser裡面的資料，並有搜尋框可以篩選這些user


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="search">
<div v-for='person in people | filterBy search'>
<img :src="person.picture.thumbnail">
{{person.name.first}}{{person.name.last}}
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data:{
people:null,
search:''
},
created:function(){
this.getData();
},
methods:{
getData:function(){
// GET /someUrl
this.$http.get('https://api.randomuser.me/?results=50').then(response => {
// get body data
this.people = response.body.results;
}, response => {
// error callback
});
}
}
});
Vue.config.devtools = true;
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：Vue.js
▲top
  • 9月 13 週三 201722:12

  • 用vue寫購物車（消費滿100打九折，清空購物車）


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.cart .clearpadding div{
padding: 0;
overflow: hidden;
}
.cart .row{
border: 1px solid #aaa;
text-align: center;
}
.cart .totalrow{
text-align: right;
}
.red{
color:#a00;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-sm-5">
<h1>商品列表</h1>
<input type="text" v-model='search'>
<button v-on:click='sortit("name")'>按我篩選商品項目</button>
<div class="row" v-for='product in products | filterBy search in "name" | orderBy accordingTo ascendOrDescend '>
<div class="col-sm-12">{{product.name}}</div>
<div class="col-sm-12">
<ul>
<li v-for='opt in product.options'>
{{opt.details}}　{{opt.price|currency}}
<button v-on:click='addToCart(product,opt)' class="btn btn-success btn-xs">+</button>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-7 cart">
<h1>購物車</h1>
<div class="row clearpadding">
<div class="col-sm-1">商品編號</div>
<div class="col-sm-3">名稱</div>
<div class="col-sm-3">價格</div>
<div class="col-sm-2">數量</div>
<div class="col-sm-2">小計</div>
</div>
<div class="row clearpadding" v-for='cartItem in incart'>
<div class="col-sm-1">{{cartItem.id}}</div>
<div class="col-sm-3">{{cartItem.name}}</div>
<div class="col-sm-3">{{cartItem.price | currency}}</div>
<div class="col-sm-2">
<div class="col-sm-5">
{{cartItem.quantity}}
</div>
<div v-if='cartItem.name != "小費"' class="col-sm-7">
<button class="btn btn-danger btn-xs" @click='addOne(cartItem)'>+</button>
<button class="btn btn-danger btn-xs" @click='removeOne(cartItem)'>-</button>
</div>
</div>
<div class="col-sm-2">
{{cartItem | subtotal | currency}}
<button class="btn btn-danger btn-xs" @click='removeElement(cartItem)'>x</button>
</div>
</div>
<div class="row">
<div class="col-sm-12 discount">
<div v-if='countTotal >100' class="text-right">
折價：{{discountedMuch | currency}}
</div>
<div v-else class="text-right">
消費超過100元，打九折
</div>
</div>
</div>
<div class="row totalrow">
<div class="col-sm-12">
<p>購買總數量：{{countQuantity}}　
總價：<span v-bind:class='{red :discountedMuch}'>{{countTotal | currency}}</span></p>
</div>
</div>
<div class="row">
小費<input type="number" v-model='newTip'>
<button class="btn btn-success" @click='addTip'>給小費</button>
<button class="btn btn-danger" @click='clearCart'>清空購物車</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var inventory=[
{
name:'Usb stick',
options:[{
id:1,
details:'16GB',
price:6.95
},{
id:2,
details:'32GB',
price:12.95
},{
id:3,
details:'64GB',
price:25.95
}]
},{
name:'Usb plug',
options:[{
id:4,
details:'3ft cable',
price:4.35
}]
},{
name:'small phone',
options:[{
id:5,
details:'nokia phone',
price:4.35
}]
},{
name:'camera',
options:[{
id:6,
details:'blue camaera',
price:76.50
},{
id:7,
details:'red camaera',
price:76.50
},{
id:8,
details:'yellow camaera',
price:76.50
},{
id:9,
details:'purple camaera',
price:76.50
}]
}
];
var incart=[];
Vue.filter('subtotal',function(cartItem){
return cartItem.price*cartItem.quantity;
});
var vm = new Vue({
el: "#app",
data:{
products:inventory,
search:'',
ascendOrDescend:1,
accordingTo:'',
incart:incart,
newTip:10,
deal:0
},
methods:{
sortit:function(name){
this.ascendOrDescend*=-1;
this.accordingTo=name;
},
addToCart:function(product,opt){
var newCartItem={};
newCartItem.name=product.name+' '+opt.details;
newCartItem.price=opt.price;
newCartItem.id=opt.id;
var newQua=1;
/*整個購物車都倒出來檢查*/
for (var i in this.incart) {
/*如果商品編號相同*/
if(this.incart[i].id===opt.id){
/*新的數量就要加一*/
newQua=parseInt(this.incart[i].quantity)+1;
/*找到重複的這個商品物件在陣列中的位置*/
var theDoubleOneIndex=this.incart.indexOf(this.incart[i]);
/*把這個陣列從這個位置開始刪掉一個*/
this.incart.splice(theDoubleOneIndex,1);
}
}
newCartItem.quantity=newQua;
this.incart.push(newCartItem);
},
addOne:function(cartItem){
cartItem.quantity++;
},
removeOne:function(cartItem){
cartItem.quantity--;
if(cartItem.quantity<=0){
/*用編號找會比較麻煩，直接用物件找*/
this.incart.splice(cartItem,1);
}
},
removeElement:function(cartItem){
/*跟上面的splice效果相同*/
this.incart.$remove(cartItem);
},
addTip:function(){
var newTip={
price:this.newTip,
name:'小費',
quantity:1,
id:new Date().getTime()
/*小費用時間來區隔*/
}
this.incart.push(newTip);
},
clearCart:function(){
this.incart=[];
this.countTotal=0;
}
},
computed:{
countQuantity:function(){
var countQuantity=0;
for (var i in this.incart) {
countQuantity += parseInt(this.incart[i].quantity);
}
return countQuantity;
},
countTotal:function(){
var countTotal=0;
for (var i in this.incart) {
countTotal += parseInt(this.incart[i].quantity*this.incart[i].price);
}
return countTotal;
},
discountedMuch:function(){
if(this.countTotal>100){
return this.countTotal - (this.countTotal*0.9);
}else{
return 0;
}
}
}
});
Vue.config.devtools = true;
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：Vue.js
▲top
  • 9月 13 週三 201722:12

  • 用vue寫購物車（消費滿100打九折，清空購物車）


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.cart .clearpadding div{
padding: 0;
overflow: hidden;
}
.cart .row{
border: 1px solid #aaa;
text-align: center;
}
.cart .totalrow{
text-align: right;
}
.red{
color:#a00;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-sm-5">
<h1>商品列表</h1>
<input type="text" v-model='search'>
<button v-on:click='sortit("name")'>按我篩選商品項目</button>
<div class="row" v-for='product in products | filterBy search in "name" | orderBy accordingTo ascendOrDescend '>
<div class="col-sm-12">{{product.name}}</div>
<div class="col-sm-12">
<ul>
<li v-for='opt in product.options'>
{{opt.details}}　{{opt.price|currency}}
<button v-on:click='addToCart(product,opt)' class="btn btn-success btn-xs">+</button>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-7 cart">
<h1>購物車</h1>
<div class="row clearpadding">
<div class="col-sm-1">商品編號</div>
<div class="col-sm-3">名稱</div>
<div class="col-sm-3">價格</div>
<div class="col-sm-2">數量</div>
<div class="col-sm-2">小計</div>
</div>
<div class="row clearpadding" v-for='cartItem in incart'>
<div class="col-sm-1">{{cartItem.id}}</div>
<div class="col-sm-3">{{cartItem.name}}</div>
<div class="col-sm-3">{{cartItem.price | currency}}</div>
<div class="col-sm-2">
<div class="col-sm-5">
{{cartItem.quantity}}
</div>
<div v-if='cartItem.name != "小費"' class="col-sm-7">
<button class="btn btn-danger btn-xs" @click='addOne(cartItem)'>+</button>
<button class="btn btn-danger btn-xs" @click='removeOne(cartItem)'>-</button>
</div>
</div>
<div class="col-sm-2">
{{cartItem | subtotal | currency}}
<button class="btn btn-danger btn-xs" @click='removeElement(cartItem)'>x</button>
</div>
</div>
<div class="row">
<div class="col-sm-12 discount">
<div v-if='countTotal >100' class="text-right">
折價：{{discountedMuch | currency}}
</div>
<div v-else class="text-right">
消費超過100元，打九折
</div>
</div>
</div>
<div class="row totalrow">
<div class="col-sm-12">
<p>購買總數量：{{countQuantity}}　
總價：<span v-bind:class='{red :discountedMuch}'>{{countTotal | currency}}</span></p>
</div>
</div>
<div class="row">
小費<input type="number" v-model='newTip'>
<button class="btn btn-success" @click='addTip'>給小費</button>
<button class="btn btn-danger" @click='clearCart'>清空購物車</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var inventory=[
{
name:'Usb stick',
options:[{
id:1,
details:'16GB',
price:6.95
},{
id:2,
details:'32GB',
price:12.95
},{
id:3,
details:'64GB',
price:25.95
}]
},{
name:'Usb plug',
options:[{
id:4,
details:'3ft cable',
price:4.35
}]
},{
name:'small phone',
options:[{
id:5,
details:'nokia phone',
price:4.35
}]
},{
name:'camera',
options:[{
id:6,
details:'blue camaera',
price:76.50
},{
id:7,
details:'red camaera',
price:76.50
},{
id:8,
details:'yellow camaera',
price:76.50
},{
id:9,
details:'purple camaera',
price:76.50
}]
}
];
var incart=[];
Vue.filter('subtotal',function(cartItem){
return cartItem.price*cartItem.quantity;
});
var vm = new Vue({
el: "#app",
data:{
products:inventory,
search:'',
ascendOrDescend:1,
accordingTo:'',
incart:incart,
newTip:10,
deal:0
},
methods:{
sortit:function(name){
this.ascendOrDescend*=-1;
this.accordingTo=name;
},
addToCart:function(product,opt){
var newCartItem={};
newCartItem.name=product.name+' '+opt.details;
newCartItem.price=opt.price;
newCartItem.id=opt.id;
var newQua=1;
/*整個購物車都倒出來檢查*/
for (var i in this.incart) {
/*如果商品編號相同*/
if(this.incart[i].id===opt.id){
/*新的數量就要加一*/
newQua=parseInt(this.incart[i].quantity)+1;
/*找到重複的這個商品物件在陣列中的位置*/
var theDoubleOneIndex=this.incart.indexOf(this.incart[i]);
/*把這個陣列從這個位置開始刪掉一個*/
this.incart.splice(theDoubleOneIndex,1);
}
}
newCartItem.quantity=newQua;
this.incart.push(newCartItem);
},
addOne:function(cartItem){
cartItem.quantity++;
},
removeOne:function(cartItem){
cartItem.quantity--;
if(cartItem.quantity<=0){
/*用編號找會比較麻煩，直接用物件找*/
this.incart.splice(cartItem,1);
}
},
removeElement:function(cartItem){
/*跟上面的splice效果相同*/
this.incart.$remove(cartItem);
},
addTip:function(){
var newTip={
price:this.newTip,
name:'小費',
quantity:1,
id:new Date().getTime()
/*小費用時間來區隔*/
}
this.incart.push(newTip);
},
clearCart:function(){
this.incart=[];
this.countTotal=0;
}
},
computed:{
countQuantity:function(){
var countQuantity=0;
for (var i in this.incart) {
countQuantity += parseInt(this.incart[i].quantity);
}
return countQuantity;
},
countTotal:function(){
var countTotal=0;
for (var i in this.incart) {
countTotal += parseInt(this.incart[i].quantity*this.incart[i].price);
}
return countTotal;
},
discountedMuch:function(){
if(this.countTotal>100){
return this.countTotal - (this.countTotal*0.9);
}else{
return 0;
}
}
}
});
Vue.config.devtools = true;
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(61)

  • 個人分類：Vue.js
▲top
  • 9月 13 週三 201721:46

  • 用vue寫購物車（給小費功能）


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.cart div{
padding: 0;
overflow: hidden;
}
.cart .btn{
padding:1px 5px;
}
.cart .row{
border: 1px solid #aaa;
text-align: center;
}
.cart .totalrow{
text-align: right;
}
.cart .totalrow div{
padding: 10px;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-sm-6">
<h1>商品列表</h1>
<input type="text" v-model='search'>
<button v-on:click='sortit("name")'>按我篩選商品項目</button>
<div class="row" v-for='product in products | filterBy search in "name" | orderBy accordingTo ascendOrDescend '>
<div class="col-sm-12">{{product.name}}</div>
<div class="col-sm-12">
<ul>
<li v-for='opt in product.options'>
{{opt.details}}　{{opt.price|currency}}
<button v-on:click='addToCart(product,opt)' class="btn btn-success btn-xs">+</button>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6 cart">
<h1>購物車</h1>
<div class="row">
<div class="col-sm-1">商品編號</div>
<div class="col-sm-3">名稱</div>
<div class="col-sm-3">價格</div>
<div class="col-sm-2">數量</div>
<div class="col-sm-2">小計</div>
</div>
<div class="row" v-for='cartItem in incart'>
<div class="col-sm-1">{{cartItem.id}}</div>
<div class="col-sm-3">{{cartItem.name}}</div>
<div class="col-sm-3">{{cartItem.price | currency}}</div>
<div class="col-sm-2">{{cartItem.quantity}}
<div v-if='cartItem.name != "小費"'>
<div class="btn btn-danger btn-xs" @click='addOne(cartItem)'>+</div>
<div class="btn btn-danger btn-xs" @click='removeOne(cartItem)'>-</div>
</div>
</div>
<div class="col-sm-2">
{{cartItem | subtotal | currency}}
<div class="btn btn-danger btn-xs" @click='removeElement(cartItem)'>x</div>
</div>
</div>
<div class="row totalrow">
<div class="col-sm-12">
<p>購買總數量：{{countQuantity}}　總價：{{countTotal | currency}}</p>
</div>
</div>
<div class="row">
小費<input type="number" v-model='newTip'>
<button class="btn btn-success" @click='addTip'>給小費</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var inventory=[
{
name:'Usb stick',
options:[{
id:1,
details:'16GB',
price:6.95
},{
id:2,
details:'32GB',
price:12.95
},{
id:3,
details:'64GB',
price:25.95
}]
},{
name:'Usb plug',
options:[{
id:4,
details:'3ft cable',
price:4.35
}]
},{
name:'small phone',
options:[{
id:5,
details:'nokia phone',
price:4.35
}]
},{
name:'camera',
options:[{
id:6,
details:'blue camaera',
price:76.50
},{
id:7,
details:'red camaera',
price:76.50
},{
id:8,
details:'yellow camaera',
price:76.50
},{
id:9,
details:'purple camaera',
price:76.50
}]
}
];
var incart=[];
Vue.filter('subtotal',function(cartItem){
return cartItem.price*cartItem.quantity;
});
var vm = new Vue({
el: "#app",
data:{
products:inventory,
search:'',
ascendOrDescend:1,
accordingTo:'',
incart:incart,
newTip:10,
deal:0
},
methods:{
sortit:function(name){
this.ascendOrDescend*=-1;
this.accordingTo=name;
},
addToCart:function(product,opt){
var newCartItem={};
newCartItem.name=product.name+' '+opt.details;
newCartItem.price=opt.price;
newCartItem.id=opt.id;
var newQua=1;
/*整個購物車都倒出來檢查*/
for (var i in this.incart) {
/*如果商品編號相同*/
if(this.incart[i].id===opt.id){
/*新的數量就要加一*/
newQua=parseInt(this.incart[i].quantity)+1;
/*找到重複的這個商品物件在陣列中的位置*/
var theDoubleOneIndex=this.incart.indexOf(this.incart[i]);
/*把這個陣列從這個位置開始刪掉一個*/
this.incart.splice(theDoubleOneIndex,1);
}
}
newCartItem.quantity=newQua;
this.incart.push(newCartItem);
},
addOne:function(cartItem){
cartItem.quantity++;
},
removeOne:function(cartItem){
cartItem.quantity--;
if(cartItem.quantity<=0){
/*用編號找會比較麻煩，直接用物件找*/
this.incart.splice(cartItem,1);
}
},
removeElement:function(cartItem){
/*跟上面的splice效果相同*/
this.incart.$remove(cartItem);
},
addTip:function(){
var newTip={
price:this.newTip,
name:'小費',
quantity:1,
id:new Date().getTime()
/*小費用時間來區隔*/
}
this.incart.push(newTip);
}
},
computed:{
countQuantity:function(){
var countQuantity=0;
for (var i in this.incart) {
countQuantity += parseInt(this.incart[i].quantity);
}
return countQuantity;
},
countTotal:function(){
var countTotal=0;
for (var i in this.incart) {
countTotal += parseInt(this.incart[i].quantity*this.incart[i].price);
}
return countTotal;
}
}
});
Vue.config.devtools = true;
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：Vue.js
▲top
  • 9月 13 週三 201721:46

  • 用vue寫購物車（給小費功能）


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.cart div{
padding: 0;
overflow: hidden;
}
.cart .btn{
padding:1px 5px;
}
.cart .row{
border: 1px solid #aaa;
text-align: center;
}
.cart .totalrow{
text-align: right;
}
.cart .totalrow div{
padding: 10px;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-sm-6">
<h1>商品列表</h1>
<input type="text" v-model='search'>
<button v-on:click='sortit("name")'>按我篩選商品項目</button>
<div class="row" v-for='product in products | filterBy search in "name" | orderBy accordingTo ascendOrDescend '>
<div class="col-sm-12">{{product.name}}</div>
<div class="col-sm-12">
<ul>
<li v-for='opt in product.options'>
{{opt.details}}　{{opt.price|currency}}
<button v-on:click='addToCart(product,opt)' class="btn btn-success btn-xs">+</button>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6 cart">
<h1>購物車</h1>
<div class="row">
<div class="col-sm-1">商品編號</div>
<div class="col-sm-3">名稱</div>
<div class="col-sm-3">價格</div>
<div class="col-sm-2">數量</div>
<div class="col-sm-2">小計</div>
</div>
<div class="row" v-for='cartItem in incart'>
<div class="col-sm-1">{{cartItem.id}}</div>
<div class="col-sm-3">{{cartItem.name}}</div>
<div class="col-sm-3">{{cartItem.price | currency}}</div>
<div class="col-sm-2">{{cartItem.quantity}}
<div v-if='cartItem.name != "小費"'>
<div class="btn btn-danger btn-xs" @click='addOne(cartItem)'>+</div>
<div class="btn btn-danger btn-xs" @click='removeOne(cartItem)'>-</div>
</div>
</div>
<div class="col-sm-2">
{{cartItem | subtotal | currency}}
<div class="btn btn-danger btn-xs" @click='removeElement(cartItem)'>x</div>
</div>
</div>
<div class="row totalrow">
<div class="col-sm-12">
<p>購買總數量：{{countQuantity}}　總價：{{countTotal | currency}}</p>
</div>
</div>
<div class="row">
小費<input type="number" v-model='newTip'>
<button class="btn btn-success" @click='addTip'>給小費</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var inventory=[
{
name:'Usb stick',
options:[{
id:1,
details:'16GB',
price:6.95
},{
id:2,
details:'32GB',
price:12.95
},{
id:3,
details:'64GB',
price:25.95
}]
},{
name:'Usb plug',
options:[{
id:4,
details:'3ft cable',
price:4.35
}]
},{
name:'small phone',
options:[{
id:5,
details:'nokia phone',
price:4.35
}]
},{
name:'camera',
options:[{
id:6,
details:'blue camaera',
price:76.50
},{
id:7,
details:'red camaera',
price:76.50
},{
id:8,
details:'yellow camaera',
price:76.50
},{
id:9,
details:'purple camaera',
price:76.50
}]
}
];
var incart=[];
Vue.filter('subtotal',function(cartItem){
return cartItem.price*cartItem.quantity;
});
var vm = new Vue({
el: "#app",
data:{
products:inventory,
search:'',
ascendOrDescend:1,
accordingTo:'',
incart:incart,
newTip:10,
deal:0
},
methods:{
sortit:function(name){
this.ascendOrDescend*=-1;
this.accordingTo=name;
},
addToCart:function(product,opt){
var newCartItem={};
newCartItem.name=product.name+' '+opt.details;
newCartItem.price=opt.price;
newCartItem.id=opt.id;
var newQua=1;
/*整個購物車都倒出來檢查*/
for (var i in this.incart) {
/*如果商品編號相同*/
if(this.incart[i].id===opt.id){
/*新的數量就要加一*/
newQua=parseInt(this.incart[i].quantity)+1;
/*找到重複的這個商品物件在陣列中的位置*/
var theDoubleOneIndex=this.incart.indexOf(this.incart[i]);
/*把這個陣列從這個位置開始刪掉一個*/
this.incart.splice(theDoubleOneIndex,1);
}
}
newCartItem.quantity=newQua;
this.incart.push(newCartItem);
},
addOne:function(cartItem){
cartItem.quantity++;
},
removeOne:function(cartItem){
cartItem.quantity--;
if(cartItem.quantity<=0){
/*用編號找會比較麻煩，直接用物件找*/
this.incart.splice(cartItem,1);
}
},
removeElement:function(cartItem){
/*跟上面的splice效果相同*/
this.incart.$remove(cartItem);
},
addTip:function(){
var newTip={
price:this.newTip,
name:'小費',
quantity:1,
id:new Date().getTime()
/*小費用時間來區隔*/
}
this.incart.push(newTip);
}
},
computed:{
countQuantity:function(){
var countQuantity=0;
for (var i in this.incart) {
countQuantity += parseInt(this.incart[i].quantity);
}
return countQuantity;
},
countTotal:function(){
var countTotal=0;
for (var i in this.incart) {
countTotal += parseInt(this.incart[i].quantity*this.incart[i].price);
}
return countTotal;
}
}
});
Vue.config.devtools = true;
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(19)

  • 個人分類：Vue.js
▲top
«1...16171837»

文章搜尋

文章搜尋

文章分類

toggle 伺服器架設 (1)
  • AWS (2)
toggle 伺服器架設 (1)
  • AWS (2)
toggle 前端框架 (2)
  • Vue.js (26)
  • Angular.js (2)
toggle 前端框架 (2)
  • Vue.js (26)
  • Angular.js (2)
toggle HTML與開發工具 (2)
  • HTML (2)
  • 開發工具相關 (8)
toggle HTML與開發工具 (2)
  • HTML (2)
  • 開發工具相關 (8)
toggle CSS與framework (4)
  • CSS (9)
  • Bootstrap (26)
  • CSS插件 (1)
  • CSS工具 (3)
toggle CSS與framework (4)
  • CSS (9)
  • Bootstrap (26)
  • CSS插件 (1)
  • CSS工具 (3)
toggle JS與函式庫 (3)
  • js套件 (1)
  • jQuery (28)
  • Javascript (46)
toggle JS與函式庫 (3)
  • js套件 (1)
  • jQuery (28)
  • Javascript (46)
toggle 後端框架 (1)
  • Laravel (26)
toggle 後端框架 (1)
  • Laravel (26)
  • 自學資源 (1)
  • 自學資源 (1)
  • 未分類文章 (1)

文章分類

toggle 伺服器架設 (1)
  • AWS (2)
toggle 伺服器架設 (1)
  • AWS (2)
toggle 前端框架 (2)
  • Vue.js (26)
  • Angular.js (2)
toggle 前端框架 (2)
  • Vue.js (26)
  • Angular.js (2)
toggle HTML與開發工具 (2)
  • HTML (2)
  • 開發工具相關 (8)
toggle HTML與開發工具 (2)
  • HTML (2)
  • 開發工具相關 (8)
toggle CSS與framework (4)
  • CSS (9)
  • Bootstrap (26)
  • CSS插件 (1)
  • CSS工具 (3)
toggle CSS與framework (4)
  • CSS (9)
  • Bootstrap (26)
  • CSS插件 (1)
  • CSS工具 (3)
toggle JS與函式庫 (3)
  • js套件 (1)
  • jQuery (28)
  • Javascript (46)
toggle JS與函式庫 (3)
  • js套件 (1)
  • jQuery (28)
  • Javascript (46)
toggle 後端框架 (1)
  • Laravel (26)
toggle 後端框架 (1)
  • Laravel (26)
  • 自學資源 (1)
  • 自學資源 (1)
  • 未分類文章 (1)

最新文章

  • 部落格搬家囉！ 網址：https://bugswarehouse.blogspot.tw/
  • 部落格搬家囉！ 網址：https://bugswarehouse.blogspot.tw/
  • 用vue寫出：有頁碼表格，可排序，搜尋，限制出現之資料
  • 用vue寫出：有頁碼表格，可排序，搜尋，限制出現之資料
  • 使用laravel內建的vue componet
  • 使用laravel內建的vue componet
  • Vuetify
  • Vuetify
  • VS code安裝後相關
  • VS code安裝後相關

最新文章

  • 部落格搬家囉！ 網址：https://bugswarehouse.blogspot.tw/
  • 部落格搬家囉！ 網址：https://bugswarehouse.blogspot.tw/
  • 用vue寫出：有頁碼表格，可排序，搜尋，限制出現之資料
  • 用vue寫出：有頁碼表格，可排序，搜尋，限制出現之資料
  • 使用laravel內建的vue componet
  • 使用laravel內建的vue componet
  • Vuetify
  • Vuetify
  • VS code安裝後相關
  • VS code安裝後相關

個人資訊

Jerry
暱稱：
Jerry
分類：
數位生活
好友：
累積中
地區：

個人資訊

Jerry
暱稱：
Jerry
分類：
數位生活
好友：
累積中
地區：

文章精選

文章精選

熱門文章

  • (1,572)用vue寫購物車（小計、總計、數量計算）
  • (473)用js寫一個時鐘，用Date物件
  • (387)Autoprefixer CSS 自動加前綴工具（以符合各瀏覽器）
  • (43)過濾器，排列方式依據名稱字首，1與-1切換升冪與降冪
  • (42)createElement、createTextNode、appendChild，動態新增元素組合技
  • (12)Laravel，view視圖
  • (8)面試會考：寫出5的倍數的乘法表
  • (7)counter-increment與counter-rest，文章分段可用
  • (6)childNode和nodeValue，我的html是一棵樹，啊哩啊紮都是節點
  • (2)on綁定傳入四個參數，事件物件的type和data.自定義

熱門文章

  • (1,572)用vue寫購物車（小計、總計、數量計算）
  • (473)用js寫一個時鐘，用Date物件
  • (387)Autoprefixer CSS 自動加前綴工具（以符合各瀏覽器）
  • (43)過濾器，排列方式依據名稱字首，1與-1切換升冪與降冪
  • (42)createElement、createTextNode、appendChild，動態新增元素組合技
  • (12)Laravel，view視圖
  • (8)面試會考：寫出5的倍數的乘法表
  • (7)counter-increment與counter-rest，文章分段可用
  • (6)childNode和nodeValue，我的html是一棵樹，啊哩啊紮都是節點
  • (2)on綁定傳入四個參數，事件物件的type和data.自定義

最新留言

    最新留言

      動態訂閱

      動態訂閱

      誰來我家

      誰來我家

      參觀人氣

      • 本日人氣：
      • 累積人氣：

      參觀人氣

      • 本日人氣：
      • 累積人氣：