脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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>

总结

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

您可能感兴趣的文章:

相关文章

  • 教你搭建按需加载的Vue组件库(小结)

    教你搭建按需加载的Vue组件库(小结)

    这篇文章主要介绍了教你搭建按需加载的Vue组件库(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • vue 输入电话号码自动按3-4-4分割功能的实现代码

    vue 输入电话号码自动按3-4-4分割功能的实现代码

    这篇文章主要介绍了vue 输入电话号码自动按3-4-4分割功能的实现代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • vue学习笔记之slot插槽基本用法实例分析

    vue学习笔记之slot插槽基本用法实例分析

    这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结合实例形式分析了vue slot插槽基本使用方法与操作注意事项,需要的朋友可以参考下
    2020-02-02
  • 详解VUE 定义全局变量的几种实现方式

    详解VUE 定义全局变量的几种实现方式

    本篇文章主要介绍了VUE 全局变量的几种实现方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • vite与xcode环境变量配置记录详解

    vite与xcode环境变量配置记录详解

    这篇文章主要为大家介绍了vite与xcode环境变量配置记录详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • vue axios封装httpjs,接口公用配置拦截操作

    vue axios封装httpjs,接口公用配置拦截操作

    这篇文章主要介绍了vue axios封装httpjs,接口公用配置拦截操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue cli3 项目中如何使用axios发送post请求

    vue cli3 项目中如何使用axios发送post请求

    这篇文章主要介绍了vue cli3 项目中如何使用axios发送post请求，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • 关于vue-socket.io使用及版本原因消息无法监听bug

    关于vue-socket.io使用及版本原因消息无法监听bug

    这篇文章主要介绍了关于vue-socket.io使用及版本原因消息无法监听bug，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • Vue2 Vue-cli中使用Typescript的配置详解

    Vue2 Vue-cli中使用Typescript的配置详解

    Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星，足以说明其以悄然成为主流。下面这篇文章主要给大家介绍了关于Vue2 Vue-cli中使用Typescript的配置的相关资料，需要的朋友可以参考下。
    2017-07-07
  • vue element-ui的el-input-number默认值设置为空方法

    vue element-ui的el-input-number默认值设置为空方法

    这篇文章主要给大家介绍了关于vue element-ui的el-input-number默认值设置为空的相关资料,el-input-number组件是Element UI非常常用的一个数字输入框组件,它提供了默认值设置的选项,需要的朋友可以参考下
    2023-08-08

最新评论