v-text和v-on计算器案例

最新推荐文章于 2022-04-11 10:56:51 发布

m0_44974944

最新推荐文章于 2022-04-11 10:56:51 发布

阅读量155

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/m0_44974944/article/details/108774451

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

v-text和v-on计算器案例

计算器案例步骤：
1. data中定义数据: num
2. methods中添加两个方法：add(添加) sub(递减)
3. 使用v-text将num设置给span标签
4. 使用v-on将add,sub分别绑定给+ - 按钮、
5. 累加的逻辑：小于10累加，否者提示
6. 递减逻辑：大于0递减，否则提示
css样式

*{
    margin:0;
    padding: 0;
}
.input-num{
    width: 330px;
    height: 100px;
    background-color: pink;
    margin: 50px auto;
    border: 1px solid rgb(239, 239, 239);
    border-radius: 10px 10px;
}
.input-num button{
    width: 110px;
    height: 100px;
    border: 0;
}
.input-num button:nth-child(1){
    float: left;
}
.input-num button:nth-child(3){
    float: right;
}
.input-num span{
    display: block;
    width: 110px;
    height: 100px;
    background-color: skyblue;
    text-align: center;
    line-height: 100px;
    float: left;
}

html，vue代码

<body>
     <!-- 2.html结构 -->
     <div id="app">
        <!-- 计数器功能模块 -->
        <div class="input-num">
            <button @click="sub">-</button>
            <span v-text="num"></span>
            <button @click="add">+</button>
        </div>
     </div>
     <!-- 1.开发环境版message本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <!-- 3.创建Vue实例 -->
     <script>
          var app = new Vue({
                el:"#app",
                data:{
                    num:1
                },
                methods:{
                    add:function(){
                        this.num = this.num<10?(this.num+1):("最大了")
                    },
                    sub:function(){
                        this.num = this.num>0?(this.num-1):("最小了")
                    }
                }
          })
     </script>
</body>

在这里插入图片描述

m0_44974944

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-text和v-on计算器案例

v-text和v-on计算器案例计算器案例步骤：data中定义数据: nummethods中添加两个方法：add(添加) sub(递减)使用v-text将num设置给span标签使用v-on将add,sub分别绑定给+ - 按钮、累加的逻辑：小于10累加，否者提示递减逻辑：大于0递减，否则提示css样式*{ margin:0; padding: 0;}.input-num{ width: 330px; height: 100px;
复制链接

扫一扫