vue组件开发~计数器

最新推荐文章于 2022-11-16 19:42:05 发布

许之知否

最新推荐文章于 2022-11-16 19:42:05 发布

阅读量335

点赞数

分类专栏： vue 文章标签： vue html js css

本文链接：https://blog.csdn.net/h083417172_/article/details/111320393

版权

vue 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

实现效果如图：
在这里插入图片描述
使用v-bind动态绑定和v-on事件监听，使用props让父组件传递数据给子组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <style>
        .container{
            width: 250px;
            height: 400px;
            position: relative;
            border-radius: 20px;
            background-color: cornflowerblue;
        }
        .counter{
            position: relative;
            width: 200px;
            height: 350px;
            display: flex;
            margin-left: 20px;
        }
        .counter-content{
            display: inline-block;
            width: 150px;
            height: 150px;
            margin: auto;
            text-align: center;
            font-size: 80px;
            color: cornflowerblue;

            border-radius: 20px;
            background-color: lightgoldenrodyellow;
        }
        .btns{
            height: 30px;
            display: flex;
            margin: 0px 15px 15px 15px;
            border: 0px;
            justify-content: space-between;
        }
        .btn{
            width: 50px;
            color: lightgoldenrodyellow;
            outline-color: cadetblue;
            border-radius: 5px;
            border-color: #ffffff;
            border-style: outset;
            background-color: cornflowerblue;
        }
    </style>

    <div id="app">
        <cpn :value = "number"></cpn>
    </div>

    <template id="cpn">
        <div class="container">
            <div class="counter">
                <span class="counter-content">{{currentValue}}</span>
            </div>

            <div class="btns">
                <button class="btn" @click = "decrease">-</button>
                <button class="btn" @click = "increase">+</button>
                <button class="btn" @click = "zeroChange">归零</button>
            </div>
        </div>
    </template>

    <script src="../js/vue.js"></script>
    <script>
        const cpn = {
          template: "#cpn",
          props:['value'],
          data:function(){
            return{
              currentValue: this.value
            }
          },
          methods:{
            decrease:function () {
              this.currentValue -= 1
            },
            increase:function () {
              this.currentValue += 1
            },
            zeroChange:function () {
              this.currentValue = 0
            }
          }
        }
        const app = new Vue({
          el: "#app",
          data:{
            number: 0
          },
          components:{
            cpn
          }
        })
    </script>
</body>
</html>

许之知否

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
vue组件开发~计数器

实现效果如图：使用v-bind动态绑定和v-on事件监听，使用props让父组件传递数据给子组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <style> .container{
复制链接

扫一扫