使用VUE组件实现简单的点赞功能

使用VUE组件实现简单的点赞功能

HTML页面 ↓
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点赞组件</title>
    <style>
    /* 点击后变为红色*/
        .liked {
            background: deeppink;
        }
    </style>
</head>

<body>
    <div id="app">
        <like></like>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    <script src="index.js"></script>
</body>

</html>
js页面 ↓
// 定义全局
Vue.component('like', {
    template: '',
    data: function () {
        return {
        //默认有10个点赞数
            like_count: 10,
            //一个用户只能点一次赞,给个默认值限制一下
            liked: false
        }
    },
    methods: {
        toggle_like: function () {
            // 如果liked为false 则like_count++ 并把liked取反
            if (!this.liked) {
                this.like_count++
            } else {
                // liked 为true时 like_count-- 并把liked取反
                this.like_count--
            }
            this.liked = !this.liked //把liked取反
        }
    }
})

new Vue({
    el: "#app"
})

我们感觉 template 里面的值太长了,所以要把那一段代码写到 HTML页面中,然后再根据id调用回来

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表哥的VUE 1</title>
    <style>
        .liked {
            background: deeppink;
        }
    </style>
</head>

<body>
    <div id="app">
        <like></like>
    </div>
    <!-- like组件 -->
    <template id="like-component-tpl">
        <button :class="{liked:liked}" @click="toggle_like()">点赞{{like_count}}</button>
    </template>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    <script src="index.js"></script>
</body>

</html>
// 定义全局
Vue.component('like', {
    // template: '',
    // 以上方式写的太长,把代码放到html文件里,利用id把代码传回到js文件里
    template: '#like-component-tpl',
    data: function () {
        return {
            like_count: 10,
            liked: false
        }
    },
    methods: {
        toggle_like: function () {
            // 如果liked为false 则like_count++ 并把liked取反
            if (!this.liked) {
                this.like_count++
            } else {
                // liked 为true时 like_count-- 并把liked取反
                this.like_count--
            }
            this.liked = !this.liked //把liked取反
        }
    }
})

new Vue({
    el: "#app"
})

优雅的一批0.0

你可能感兴趣的:(使用VUE组件实现简单的点赞功能)