1. Chat NodeJS + VueJS
  2. Create Cart Laravel 5.4 +VueJS
  3. Create Form Register using Nodejs + Vuejs
  4. Create QR Code in VueJS
  5. Create Template Vuejs and Laravel 5.4
  6. Deploying Vuejs to Heroku
  7. Hướng dẫn kết hợp Nodejs + Vuejs
  8. Read Data From File Using FileReader API in Vuejs
  9. Passing data from Laravel to Vue
  10. Multiple Subcategories in Laravel 5.8 + Vue
  11. Laravel 5.7 + Vue SPA
  12. Send Mail using Laravel 5.4 + VueJS
  13. Transition in VueJS
  14. Sử dụng Routes trong Vuejs
  15. Sử dụng Props trong Vuejs
  16. Sử dụng Axios Get API trong Vuejs
  17. SHOW DATA VUEJS IN TEMPLATE BLADE LARAVEL
  18. Shopping list using Vuejs
  19. Xây dụng chức năng Register+ Login bằng Laravel 5.4 + VueJS
  20. Video Create Form Register and Login + Chat Real Time Using Nodejs + Vuejs
  21. Using v-for in VueJS
  22. Tạo ứng dụng Laravel 5.4 kết hợp với Vuejs

Transition in VueJS

min read

Hướng dẫn sử dụng Transition trong VueJS, Transition khi nói đến thì mọi người ai cũng hình dung ra là hiệu ứng chuyển động trong CSS và thường gặp nhất trong FrontEnd, để làm cho website có hiệu ứng phong phú hơn, đẹp hơn.

Trong VueJS mọi người cũng có thể sự dụng Transition cũng giống như CSS vậy, nay mình chia sẻ với mọi người cách sử dụng trong Vuejs nhé!

Các bạn tạo một file transtion-vuejs.html và copy source bên dưới vào là chạy được nhé, phần này cũng đơn giản, nên mình cũng làm cho các bạn hình dung về cách dùng thôi hi

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div class="row" id="todo-list-example">
    <div v-for="(drink,index) in drinks" class="w-full flex">
         <transition name="transition-slide-right"><button v-show="drink.amount" type="button" class="btn btn-danger" v-on:click="click1(index)">-</button></transition>
       
            <a class="btn btn-success" >{{drink.name}} ({{drink.amount}})</a>
        
         <button type="button" class="btn btn-danger" v-on:click="click2(index)">+</button>
    </div>
</div>
<style>
.w-full{margin:10px 0px;}
   .transition-slide-right-enter-active, .transition-slide-right-leave-active {
    transition: transform .5s;
}

.transition-slide-right-enter, .transition-slide-right-leave-to {
    transform: translateX(100%);
}

</style>
<script>
    new Vue({
  el: '#todo-list-example',
 data(){
            return {
                drinks: [
                    {name: 'Cola', price: '1.0', amount: 1},
                    {name: 'Sinas', price: '1.0', amount: 1}
                ],
            }
        },
        methods:{
            click1:function(index){
                this.drinks[index].amount=this.drinks[index].amount-1;
            },
            click2:function(index){
                this.drinks[index].amount=this.drinks[index].amount+1;
            }
        }    
})
</script>

Trong đoạn mã bên trên mình sử dụng đường link vuejs CDN gắn vô trực tiếp cho dễ sử dụng, nếu các bạn muốn sài bootstrap thì gắn link css bootstrap vô cho đẹp nhé

Bên cạnh đó các bạn xem đoạn script của mình, có tạo 2 hàm(click1,click2) để xử lý sự kiện tăng hoặc giảm nhé,nếu giảm về cafe(0) thì button [ - ] sẽ biến mất, nếu  cafe(1) thì sẽ hiện button [ - ]

Đều quan trọng là làm sao bạn xác nhận được vị trí hiện tại của một giá trí đó, mới quan trọng để bạn biết mà lấy giá trị tại vị trí đó ra và xử lý các bạn có thể xem lại chổ v-for của mình trên nhé: v-for="(drink,index) in drinks", index giúp chúng ta for ra vị trí hiện tại của một đối tượng trong drinks của ta! và lúc đó bạn chỉ cần xử lý thôi ::)

Chúc các bạn làm thành công!

x

Ủng hộ tôi bằng cách click vào quảng cáo. Để tôi có kinh phí tiếp tục phát triển Website!(Support me by clicking on the ad. Let me have the money to continue developing the Website!)