Vue 카 트 인 스 턴 스 코드 두 가지 구현

8157 단어 Vue쇼핑 카 트
1.첫 번 째 는 비교적 간단 하 다.
효과 도

구현 코드:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>     </title>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
 *{
 padding: 0;
 margin:0
 }
 ul li{
 width: 1200px;
 display: flex;
 align-items: center;
 justify-content: center;
 }
 li div,.total{
 display: inline-block;
 width:200px;
 height: 50px;
 line-height: 50px;
 text-align: center;
 }
 button{
 width: 60px;
 height: 40px;
 text-align: center;
 line-height: 40px;
 }

</style>
<body>

 <div id="app">
 <ul>
  <goodsitem 
  v-for="item in goodslist" 
  :item="item" 
  :key="item.id"
  @onchange="(type)=>{handleCount(type,item)}"
  @ondelete="()=>{handleDelete(item.id)}">
  </goodsitem>
  <div class="total" style="padding-left: 113px">  :{{total}}</div>
 </ul>
 </div>

</body>
<script>
 var computed={
 props:{
  count:{
   type:Number,
   require:true
  }
 },
 methods:{
  handleCount(type){
  this.$emit('onchange',type)
  }
 },
 template:`<div style="width:200px">
   <button @click="handleCount('sub')">-</button>
   <span>{{count}}</span>
   <button @click="handleCount('add')" >+</button>
   </div>
 
 `
 
 }
 var goodsitem={
 props:{
  item:{
  type:Object,
  require:true
  }
 },
 methods:{
  handleCount(type){
  this.$emit('onchange',type)
  },
  handleDelete(){
  this.$emit('ondelete')
  }
 },
 components:{
  computed
 },
 template:`<li>
   <div>{{item.goodsName}}</div>
   <div>{{item.price}}</div>
   <computed :count="item.count" @onchange="handleCount"></computed>
   <div>{{item.sum}}</div>
   <div><button @click="handleDelete">  </button></div>
   </li>
   `
 }

 var app=new Vue({
 el:"#app",
 data:{
  goodslist:[{
  id:1,
  goodsName:"   ",
  price:100,
  count:1,
  sum:100
  },{
  id:2,
  goodsName:"   ",
  price:200,
  count:2,
  sum:400
  },{
  id:3,
  goodsName:"   ",
  price:300,
  count:3,
  sum:900
  },{
  id:4,
  goodsName:"   ",
  price:400,
  count:1,
  sum:400
  },
  ]
 },
 methods:{
  handleCount(type,item){
  if(type=='add'){
   item.count+=1
  }else{
   if(item.count==1){
   this.handleDelete(item.id) 
   return
   }
   item.count-=1
  }
  item.sum=item.count*item.price
  },
  handleDelete(id){
  return this.goodslist=this.goodslist.filter((item)=>{
   return id!=item.id
  })
  }
 },
 computed:{
  total(){
  return this.goodslist.reduce((total,item)=>{
   return total+=item.sum
  },0)
  }
 },
 components:{
  goodsitem
 }
 })
</script>
</html>
2.vue 로 이 루어 진 간단 한 응답 식 카 트 사례
실현 결과

위 와 같이 모든 책 류 데 이 터 는 배열 에 존재 합 니 다.표 에 옮 겨 다 니 며+와-클릭 하면 수량 과 총 가격 의 응답 식 변 화 를 실현 할 수 있 습 니 다.그 중에서 마이너스 번호 가 1 일 때 disabled 형식 을 추가 하여 클릭 할 수 없습니다.가격 표시 시 필 터 를 통 해 표 시 된 것 은 Z*65509 기호 와 두 개의 소수 입 니 다.프로젝트 구 조 는 세 개의 파일 이다.
index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <link rel="stylesheet" href="style.css" rel="external nofollow" >
</head>
<body>
<div id="app">
 <div v-if="books.length">
 <table>
 <thead>
 <tr>
 <th></th>
 <th>    </th>
 <th>    </th>
 <th>  </th>
 <th>    </th>
 <th>   </th>
 </tr>
 </thead>

 <tbody>
 <tr v-for="(item,index) in books">
 <!--<td v-for="value in item">{{value}}</td>-->
 <td>{{item.id}}</td>
 <td>{{item.name}}</td>
 <td>{{item.date}}</td>
 <!--<td>{{getFinalPrice(item.price)}}</td>         -->
 <td>{{item.price | showPrice}}</td>
 <td>
 <button @click="increment(index)" v-bind:disabled="item.count<=1">-</button>
 {{item.count}}
 <button @click="decrement(index)">+</button>
 </td>
 <td>
 <button @click="removeHandler(index)">  </button>
 </td>
 </tr>
 </tbody>
 </table>
 <h2>   : {{totalprice | showPrice}}</h2>
 </div>
 <h2 v-else>      </h2>
</div>
<script src="../js/vue.js"></script>
<script src="main.js"></script>
<script></script>
</body>
</html>
main.js

const app = new Vue({
 el:"#app",
 data: {
 books: [
 {
 id: 1,
 name: '    ',
 date: '2019-01-10',
 price: 85.00,
 count: 1
 },
 {
 id: 2,
 name: '     ',
 date: '2019-02-14',
 price: 90.00,
 count: 2
 },
 {
 id: 3,
 name: '    ',
 date: '2019-09-10',
 price: 85.21,
 count: 1
 },
 {
 id: 4,
 name: '    ',
 date: '2019-08-21',
 price: 19.02,
 count: 1
 },
 ]
 },
 methods:{
 getFinalPrice(price) {
 return '$' + price.toFixed(2)
 },
 increment(index){
 /*if(this.books[index].count <= 1) return*/
 this.books[index].count--
 },
 decrement(index){
 this.books[index].count++
 },
 removeHandler(index){
 this.books.splice(index,1)
 }
 },
 filters:{
 showPrice(price){
 return '$' + price.toFixed(2)
 }
 },
 computed:{
 totalprice(){
 let tprice = 0
 for(let i = 0; i< this.books.length; i++)
 {
 tprice += this.books[i].price * this.books[i].count
 }
 return tprice
 }
 }
})
style.css

table{
 border: 1px solid #e9e9e9;
 border-collapse: collapse;
 bordre-spacing: 0;
}

th, td {
 padding: 8px 16px;
 border: 1px solid #e9e9e9;
 text-align: left;
}

th{
 backgroud-color: #f7f7f7;
 color: #5c6b77;
 font-weight: 600;
}
Vue 의 카 트 인 스 턴 스 코드 구현 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue 카 트 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 읽 어 주시 기 바 랍 니 다.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!
ASP.NET Core 사용 GraphicQL 제1장 Hello World
asp 아래 HTTP 통과USER_AGENT 는 사용자 가 휴대 전화 로 방문 하 는 지,컴퓨터 IE 로 방문 하 는 지 판단 합 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage