1
어쩌면 저는 너무 강하지 만, BS 4 버튼의 글꼴을 완벽하게 (세로로) 정렬하고 싶습니다. 사용중인 코드는부트 스트랩 4 버튼에서 폰트 멋진 아이콘 정렬
입니다.new Vue({
el: '#app',
data: {
items: [
{
id: 1,
title: "Item 1",
price: 50
},
{
id: 2,
title: "Item 2",
price: 100
},
{
id: 3,
title: "Item 3",
price: 50.5
}
],
cart: [],
search: ''
},
methods: {
total() {
var t = 0;
for(var i = 0; i < this.cart.length; i++) {
var item = this.cart[i];
t += item.price * item.qty;
}
return t;
},
addItem(index) {
var item = this.items[index];
var found = false;
// if it's there, increment quantity:
for(var i = 0; i < this.cart.length; i++) {
let ic = this.cart[i];
if(ic.id == item.id) {
ic.qty++;
found = true;
break;
}
}
// if not, add it:
if(!found) {
this.cart.push({
title: item.title,
qty: 1,
id: item.id,
price: item.price
});
}
},
dec(item) {
item.qty--;
if(item.qty < 1) {
item.qty = 1;
// remove item from cart:
for(var i = 0; i < this.cart.length; i++) {
if(this.cart[i].id == item.id) {
this.cart.splice(i, 1);
break;
}
}
}
},
inc(item) {
// increment item on cart:
item.qty++;
},
onSubmit() {
console.log(this.search);
}
},
filters: {
currency(price) {
return '$'.concat(price.toFixed(2));
}
}
});body {
background-color: #393C3D;
color: #FFF;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue.js Poster Shop</title>
<link rel="icon" href="public/favicon.ico" type="image/x-icon">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Luckiest+Guy" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato|Montserrat" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
body {
background-color: #393C3D;
color: #FFF;
}
</style>
</head>
<body>
<div class="container-fluid" id="app">
<div class="row">
<div class="col-lg-4 col-xs-12">
<div class="card card-inverse bg-inverse my-3">
<div class="card-block">
<h1 class="card-title">
Vue.js Poster Store
<button class="btn btn-sm btn-danger" v-on:click="dec(item)">
<i class="fa fa-minus"></i>
</button>
<button class="btn btn-sm btn-success" v-on:click="inc(item)">
<i class="fa fa-plus"></i>
</button>
</h1>
<form v-on:submit.prevent="onSubmit()">
<div class="input-group">
<input type="text" class="form-control" v-model="search" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-primary" type="submit">Go!</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-xs-12">
<div class="row">
<div class="col-lg-12">
<h3>Store</h3>
</div>
</div>
<div v-for="(item, index) in items">
<div class="card card-inverse bg-inverse my-3">
<div class="card-block">
<h3 class="card-title">{{item.title}}</h3>
<p class="card-text">Here goes the description</p>
<button class="btn btn-success" v-on:click="addItem(index)">Add to cart</button>
</div>
</div>
</div>
</div>
<div class="col-lg-5 col-lg-5-offset-1 col-xs-12">
<div class="row">
<div class="col-lg-4">
<h3>Cart</h3>
</div>
<div class="col-lg-8">
<h5 v-if="cart.length">Total: {{total() | currency}}</h5>
</div>
</div>
<div v-for="item in cart">
<div class="card card-inverse bg-inverse my-3">
<div class="card-block">
<h3 class="card-title">{{item.title}}</h3>
<p>Price: {{item.price | currency}} x {{item.qty}}</p>
<button class="btn btn-sm btn-danger" v-on:click="dec(item)">
<i class="fa fa-minus"></i>
</button>
<button class="btn btn-sm btn-success" v-on:click="inc(item)">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
</div>
<div>
<div class="my-3" v-if="!cart.length">
No items in the cart
</div>
</div>
</div>
</div>
</div>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.js"></script>
<script type="text/javascript" src="public/script.js"></script>
</body>
</html>이것은 결과입니다
하고, 당신이 볼 수 있듯이, 아이콘 enter image description here
난 그냥이 (어쩌면 내가 내 코드에 뭔가 문제가 있나요?) 나는 this을 시도
해결 할 수있는 쉬운 방법이 있는지 알고 싶어하지만 난 수 없습니다 : S 완벽하게 수직으로 정렬되지 않습니다 그것을 작동하게하십시오 (그것은 divs를위한 것입니다). 어떤 아이디어?
미리 감사드립니다.
안녕 구스타보을 가 제대로 –
그것을 확인하기 위해 귀하의 게시물을 편집하고 CONTOL + M 옵션주십시오 안에 모든 코드를 추가 할 수 있습니다 내가 생각 : (10)는 여기에 솔루션 2 쉬운 방법으로 클래스를 추가하는 것입니다 –
"편집 게시물"버튼을 볼 수 없습니다 : O – Gustavo