前端小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，仅供交流学习，若是你喜欢的话，但愿能点个赞哦