通过计数器案例了解Vue指令中的内容绑定，事件绑定

最新推荐文章于 2024-08-19 16:20:42 发布

Mir ㅤ

最新推荐文章于 2024-08-19 16:20:42 发布

阅读量232

点赞数 2

本文链接：https://blog.csdn.net/weixin_45995139/article/details/119929324

版权

本文介绍了一个使用Vue.js实现的计数器应用，该应用限制数字在0-10之间进行加减操作，并在超出范围时弹窗提示。分析了数据定义、方法实现、DOM绑定等关键步骤，并详细讲解了v-text和v-html指令的用法，以及v-on事件绑定。同时，展示了不同状态下的计数器视图。案例中还涵盖了Vue的事件监听和数据交互，以及如何通过this关键字访问data中的数据。

摘要由CSDN通过智能技术生成

题目：做一个计数器在0-10之间对数字进行加减操作，超过设定范围弹窗提示

分析:1. data中定义数据：比如num
        2. methods中添加两个方法：比如add(递增)，sub(递减)
        3. 使用v-text将num设置给span标签
        4. 使用v-on将add，sub分别绑定给+、- 两按钮
        5. 累加的逻辑：在小于10的情况下进行累加，否则提示
        6. 递减的逻辑：在大于0的情况下进行递减，否则提示

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计数器</title>
</head>

<body>
    <div id="app">
        <div class="input-num">
            <button @click="sub">-</button>
            <span>{{ num }}</span>
            <button @click="add">+</button>
        </div>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                num: 1
            },
            methods: {
                sub: function () {
                    if (this.num > 0) {
                        this.num--;
                    } else {
                        alert("别点了，已经是最小了哎！")
                    }
                },
                add: function () {
                    if (this.num < 10) {
                        this.num++;
                    } else {
                        alert("别点了，已经是最大了哎！")
                    }
                }
            },
        })
    </script>
</body>

</html>

初始状态：

数值小于0状态：

数值大于10状态：

本案例注意事项：
1. 创建Vue示例是：el(挂载点)，data(数据)，methods(方法)
2. v-on 指令的作用是绑定事件，简写为@
3. 方法中通过this，关键字获取data中的数据
4. v-text 指令的作用是：设置元素的文本值，简写为{{}}
5. v-html 指令的作用是：设置元素的innerHTML

PS：Vue指令：（指 v- 实现的特殊语法；用来实现常见的网页效果）

以下是案例中涉及到的vue指令：

1. v-text：

设置标签的文本值；

默认写法会替换全部内容，使用差值表达式可以替换部分内容；

内部支持写表达式

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-text指令</title>
</head>

<body>

    <div id="app">
        <h2 v-text="message + '！'">深圳</h2>
        <h2 v-text="info + '！'">深圳</h2>
        <h2> {{ message + '！' }} 深圳</h2>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "黑马程序员！！！",
                info: "前端移动检验部"
            }
        })
    </script>

</body>

</html>

2. v-html：

设置标签的innerHTML；

内容中有html结构会被解析成标签；

v-text无论是什么都会解析成文本；

解析文本内容使用v-text，需要解析html结构使用v-html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-html指令</title>
</head>

<body>
    <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
        <p v-html="address"></p>
        <p v-text="address"></p>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                content: "黑马程序员",
                address: "<a href='http://www.itheima.com'>黑马程序员</a>"
            }
        })
    </script>
</body>

</html>

3. v-on基础：

为元素绑定事件；

事件的指令可以简写为@；

绑定的方法定义在methods属性中；

方法内部可以通过关键字this来访问定义在data中的数据

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on指令</title>
</head>

<body>
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="v-on简写" @click="doIt">
        <input type="button" value="双击事件" @dblclick="doIt">

        <h2 @click="changeFood">{{ food }}</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                food: "西兰花炒蛋"
            },
            methods: {
                doIt: function () {
                    alert("执行doIt");
                },
                changeFood: function () {
                    this.food += "好好吃！"
                }
            },
        })
    </script>
</body>

</html>

Mir ㅤ

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
通过计数器案例了解Vue指令中的内容绑定，事件绑定

题目：做一个计数器在0-10之间对数字进行加减操作，超过设定范围弹窗提示分析:1. data中定义数据：比如num2. methods中添加两个方法：比如add(递增)，sub(递减)3. 使用v-text将num设置给span标签4. 使用v-on将add，sub分别绑定给+、- 两按钮5. 累加的逻辑：在小于10的情况下进行累加，否则提示6. 递减的逻辑：在大于0的情况下进行递减，否则提示<!DOC...
复制链接

扫一扫