脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue按钮绑定事件

vue中的按钮绑定事件小案例

 更新时间：2023年11月15日 09:47:20   作者：战斗中的老段  
这篇文章主要介绍了vue中的按钮绑定事件小案例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue按钮绑定事件

效果图

第一步：写一个大盒子

第二步：写一个div；里边绑定一个class样式

第三步：写位置样式

第四步：data给绑定class设置一个初始值

第五步：写按钮

第六步：给样式设置一个初始值

第七步：绑定点击事件并判断样式

<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
        /* 第二步写4个样式 */
        .d1 {
            /* translate根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 */
            transform: translate(0, 0);
        }

        .d2 {
            /* translate根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 */
            transform: translate(200px, 0);
        }

        .d3 {
            /* translate根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 */
            transform: translate(200px, 200px);
        }

        .d4 {
            /* translate根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 */
            transform: translate(0, 200px);
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 第一步： 在容器里边写一个盒子；绑定一个样式 -->
        <div id="box" :class="postionClass">

        </div>
        <!-- 第四步：写一个点击事件 -->
        <button @click="toggle">点击切换</button>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            // 第三步 ： 样式设置默认值
            data: {
                postionClass: 'd1',
                // 第六步设定index初始值为1；从d1 d2 d3 d4后边这个1
                index: 1
            },
            methods: {
                // 第五步：绑定点击事件
                toggle() {
                    // 第八步： 判断index不能大于4，返回1；否则的话返回的是index+1
                    this.index = this.index + 1 > 4 ? 1 : this.index + 1;
                    // 第七步：点击
                    this.postionClass = 'd' + this.index
                }
            }
        })
    </script>
</body>

</html>

用computed优化一下代码

<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
        /* 第二步写4个样式 */
        .d1 {
            /* translate根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 */
            transform: translate(0, 0);
        }

        .d2 {
            /* translate根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 */
            transform: translate(200px, 0);
        }

        .d3 {
            /* translate根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 */
            transform: translate(200px, 200px);
        }

        .d4 {
            /* translate根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 */
            transform: translate(0, 200px);
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 第一步： 在容器里边写一个盒子；绑定一个样式 -->
        <div id="box" :class="postionClass">

        </div>
        <!-- 第四步：写一个点击事件 -->
        <button @click="toggle">点击切换</button>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            // 第三步 ： 样式设置默认值
            data: {
                // postionClass: 'd1',
                // 第六步设定index初始值为1；从d1 d2 d3 d4后边这个1
                index: 1
            },
            computed: {
                postionClass(){
                    return 'd' + this.index
                }
            },
            methods: {
                // 第五步：绑定点击事件
                toggle() {
                    // 第八步： 判断index不能大于4，返回1 (d1)；否则的话返回的是index+1
                    this.index = this.index + 1 > 4 ? 1 : this.index + 1;
                    // 第七步：点击
                    // this.postionClass = 'd' + this.index
                }
            }
        })
    </script>
</body>

</html>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 解决修复报错Error in render:TypeError:Cannot read properties of undefined(reading ‘ipconfig‘)问题

    解决修复报错Error in render:TypeError:Cannot read&n

    这篇文章主要介绍了解决修复报错Error in render:TypeError:Cannot read properties of undefined(reading ‘ipconfig‘)问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue项目中如何运用vuex的实战记录

    Vue项目中如何运用vuex的实战记录

    如果说是JQuery是手工作坊,那么Vue.js就像是一座工厂,虽然Vue.js做的任何事情JQuery都可以做,但无论是代码量还是流程规范性都是前者较优,下面这篇文章主要给大家介绍了关于Vue项目中如何运用vuex的相关资料,需要的朋友可以参考下
    2021-09-09
  • Vue实现获取后端接口API代码片段(已封装Service方法名)

    Vue实现获取后端接口API代码片段(已封装Service方法名)

    Vue实现获取后端接口API代码片段(已封装Service方法名)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-07-07
  • Vue和SpringBoot之间传递时间的方法实现

    Vue和SpringBoot之间传递时间的方法实现

    本文主要介绍了Vue和SpringBoot之间传递时间的方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • 解决vue单页路由跳转后scrollTop的问题

    解决vue单页路由跳转后scrollTop的问题

    今天小编就为大家分享一篇解决vue单页路由跳转后scrollTop的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue替代vuex的存储库Pinia详细介绍

    Vue替代vuex的存储库Pinia详细介绍

    这篇文章主要介绍了Vue替代vuex的存储库Pinia，听说pinia与vue3更配,便开启了vue3的学习之路，pinia 和 vuex 具有相同的功效， 是 Vue 的存储库，它允许您跨组件/页面共享状态
    2022-09-09
  • vue 实现v-for循环回来的数据动态绑定id

    vue 实现v-for循环回来的数据动态绑定id

    今天小编就为大家分享一篇vue 实现v-for循环回来的数据动态绑定id，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • 如何启动node.js文件的3个方法

    如何启动node.js文件的3个方法

    这篇文章主要给大家介绍了关于如何启动node.js文件的3个方法,文中通过图文以及实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-07-07
  • Vuex的使用及知识点笔记

    Vuex的使用及知识点笔记

    这篇文章主要介绍了Vuex的使用及知识点笔记，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12
  • Pycharm中开发vue element项目时eslint的安装和使用步骤

    Pycharm中开发vue element项目时eslint的安装和使用步骤

    这篇文章主要介绍了Pycharm中开发vue element项目时eslint的安装和使用,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-05-05

最新评论