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>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
element中async-validator异步请求验证使用
本文主要介绍了element中async-validator异步请求验证使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要介绍了vue微信分享，在当前页面分享其他页面，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
这篇文章主要介绍在Vue中是如何封装axios的相关资料，axios的封装主要是帮助我们简化代码和利于后期的更新维护，感兴趣的小伙伴可以和小编一起来阅读下面文章的具体内容2021-10-10
vue使用lodash中debounce(防抖函数)的几种方法实现
本文主要介绍了vue使用lodash中debounce(防抖函数)的几种方法实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-02-02
这篇文章主要为大家详细介绍了vue2如何使用wangeditor实现手写输入功能,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以了解下2023-12-12
这篇文章主要介绍了vue 数据遍历筛选 过滤 排序的应用操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
Vue使用xlsx和xlsx-style导出表格出现部分样式缺失的问题解决
这篇文章主要为大家详细介绍一下Vue使用xlsx-style导出excel时样式的设置,以及出现添加背景色,合并单元格部分样式缺失问题的解决,需要的可以参考下2024-01-01
vue中$emit传递多个参(arguments和$event)
本文主要介绍了vue中$emit传递多个参(arguments和$event)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
一步一步学Vue，这篇文章为大家分享了第二篇前端主流框架vue学习笔记，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要为大家详细介绍了vue实现弹窗拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
最新评论