前端小demo之用vue實現一個簡單的點贊組件

實現效果

實現步驟:

1. 註冊vue組件
2. 建立vue對象，使用組件
3. 根據須要，在組件中定義方法和data

html代碼

<div id="app">
    <!-- 引用組件 -->
    <like></like>
</div>
<!-- 建立組件模板：id:like-component -->
<template id="like-component">
    <button @click="toggle_like" :class='{liked}'>👍{{like_count}}</button>
</template>
複製代碼

js代碼

/* 註冊vue組件 */
/* 
組件名：like
組件模板id: like-component
 */
Vue.component('like', {
    template: '#like-component',
    /* 利用函數return動態數據 */
    data: function(){
        return {
            /* 點贊數 */
            like_count: 10,
            /* 點贊狀態 */
            liked: false
        }
    },
    methods: {
        /* 建立方法取反liked狀態，動態渲染點贊數 */
        toggle_like(){
            if(!this.liked){
                this.like_count++;
            }else{
                this.like_count--;
            }
            this.liked = !this.liked;
        }
    }
})
new Vue({
    el: '#app'
})
複製代碼

css代碼

.liked {
    background-color: pink;
}
複製代碼

---

附：前端小demo系列會持續更新，這個系列會傾向於比較基礎的demo，僅供交流學習，若是你喜歡的話，但願能點個贊哦