Vue | 10.本地应用 - 计数器

最新推荐文章于 2024-10-18 15:58:53 发布

xyx-Eshang

最新推荐文章于 2024-10-18 15:58:53 发布

阅读量82

点赞数

分类专栏： Vue 文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/xyxyxyxyxyxyx/article/details/120500275

版权

Vue 专栏收录该内容

44 篇文章 1 订阅

订阅专栏

文章目录

1.阶段小结
2.知识点传送门
2.源代码

1.阶段小结

创建Vue实例时：el(挂载点)，data(数据)，methods(方法)
v-on指令的作用是绑定事件，简写为@
同一个对象中可直接用this.属性名调用属性
不同对象中则用引用名.属性名调用属性
v-text指令的作用是：设置元素的textContent，也可以用插值表达式{{}}
v-html指令的作用是：设置元素的innerHTML，相比v-text可解析其中的HTML元素

2.知识点传送门

07.本地应用 - v-text指令

08.本地应用 - v-html指令

09.本地应用 - v-on指令

2.源代码

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--    载入css样式-->
    <link rel="stylesheet" href="css/vueLearning.css"/>
    <style rel="stylesheet">
        #decr {
            float: left;
        }
        #num {
            text-align: center;
            width: 30px;
            float: left;
        }
        #incr {
            float: left;
        }
    </style>
</head>
<body>
<!--计数器-->
<div id="count">
    <input id="decr" type="button" value="-" @click="decr"/>
    <div id="num" v-text="num"></div>
    <input id="incr" type="button" value="+" @click="incr"/>
</div>

<script type="text/javascript">
    new Vue({
        el: "#count",
        data: {
            num: 0
        },
        methods: {
            //减少
            decr: function () {
                if (this.num === 0) {
                    alert("别点啦，到底啦！");
                } else {
                    this.num -= 1;
                }
            },

            //增加
            incr: function () {
                if (this.num === 10) {
                    alert("别点啦，到底啦！");
                } else {
                    this.num += 1;
                }
            }
        }
    })
</script>

</body>
</html>