10-v-if指令使用-点击收藏和取消收藏的实现

最新推荐文章于 2024-05-20 17:02:17 发布

longfei815

最新推荐文章于 2024-05-20 17:02:17 发布

阅读量702

点赞数

分类专栏：小项目 vue 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/jolinoy/article/details/125293702

版权

vue 同时被 2 个专栏收录

43 篇文章 3 订阅

订阅专栏

小项目

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>10-v-if指令使用-点击收藏和取消收藏的实现</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/style.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <button v-if="!bool1" @click="bool1=!bool1">点击收藏</button>
            <button v-else @click="bool1=!bool1">取消收藏</button>
        </div>
        <script>
            new Vue({
                el:'#app',
                data:{
                    bool1:false
                }
            })
        </script>
    </body>
</html>

运行结果：