实现效果
实现步骤:
- 注册vue组件
- 创建vue对象,使用组件
- 根据需要,在组件中定义方法和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,仅供交流学习,如果你喜欢的话,希望能点个赞哦