vue案例 : 计数器

最新推荐文章于 2024-05-02 09:34:08 发布

MINX_minx

最新推荐文章于 2024-05-02 09:34:08 发布

阅读量97

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/MINX_minx/article/details/128266136

版权

本文通过Vue.js的计数器案例，探讨Vue的编程思维——数据驱动。内容包括将所需数据放入data中，利用插值或指令渲染数据，如v-on指令进行事件绑定。同时，提出了优化建议，即当事件处理函数较简单时，可以采用行内方式书写。

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

Vue编程思维: 数据驱动

(1)思考这个功能需要哪些数据，把数据写在在data里面
(2)使用插值或指令来处理数据
- 渲染数据：插值、很多指令也有渲染功能
- 绑定事件：v-on指令

优化点：一般事件处理函数只有一行代码的时候，直接写在行内
<标签 @事件名=" 代码 "></标签>

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>
    <style>
        .input-num {
            width: 180px;
            height: 40px;
            border: 1px solid gray;
            display: flex;
            border-radius: 5px;
            overflow: hidden;
        }

        .input-num button {
            width: 50px;
            height: 100%;
            font-size: 25px;
            color: gray;
            cursor: pointer;
        }

        .input-num span {
            height: 100%;
            border: 1px solid gray;
            flex: 1;
            text-align: center;
            line-height: 40px;
        }

        .input-num button.disabled {
            cursor: not-allowed;
            color: #ccc;
        }
    </style>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        <!-- 计数器 -->
        <div class="input-num">
            <button @click="num > 0 ? num-- : num">
                -
            </button>
            <span>{{ num }}</span>
            <button @click="num < 10 ? num++ : num">
                +
            </button>
        </div>
    </div>

    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                num: 0,
            }
        })
    </script>
</body>

</html>